検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5の新しいマルチメディアタグの詳細説明

HTML5の新しいマルチメディアタグの詳細説明

藏色散人
藏色散人転載
2022-08-05 16:10:503347ブラウズ

この記事では、HTML で一般的に使用されるマルチメディア タグと HTML5 の新しいマルチメディア タグを紹介します。困っている友人の役に立てば幸いです。

#HTML5 の新しいマルチメディア タグ

1: ビデオ39000f942b2545a5315c57fa3276f220

現在、39000f942b2545a5315c57fa3276f220 要素は 3 つのビデオ形式をサポートしています: MP4 形式を使用してみてください

BrowserMP4WebMOggIEYESNONO##ChromeFirefoxSafariOpera#YESYES
<video controls="controls" autoplay="autoplay" muted="muted" width="500px" height="400px" loop="loop" poster="images/tudou.jpg" preload="none">
    <source src="medio/mov_bbb.mp4">
    <source src="medio/mov_bbb.ogg">
    您的浏览器暂不支持<video>标签播放视频</video>
ビデオ39000f942b2545a5315c57fa3276f220—共通属性
YES YES YES
YES 開始中Firefox21 バージョン以降 Firefox 30 以降の Linux システム YES YES
YES NO NO
YES Opera25 バージョン以降

属性値 説明##autoplayautoplay#controlscontrolsユーザーに再生コントロールを表示プレーヤーの幅を設定Playデバイス高さループビデオ URL アドレス待機中の画像をロード再生をミュート##2: オーディオ
ビデオは自動的に再生する準備ができています (Google ブラウザでミュートを追加する必要があります)自動再生の問題を解決するには)
##width ピクセル(ピクセル)
高さ ピクセル(ピクセル)
ループ ループ
src url
ポスター 画像 URL
ミュート ミュート
b97864c2e0ef2353a16c4d64c7734e92

ブラウザMP3

WavOgg##IE 9 YESNONOChrome 6 YESYESYESFirefox 3.6 YESYES はいSafari 5 YESYESNOYESGoogle Chrome では音声とビデオの自動再生が無効になりますプロパティ
##Opera 10 はい YES 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HTML5音频标签</title></head><body>
   <audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">
   <source src="medio/music.mp3" type="audio/mpeg">
   您的浏览器不支持audio元素</audio>
   </body>
   </html>
値

説明##自動再生自動再生Autoplaycontrolscontrolsユーザーに再生コントロールを表示#loopsrcmutedブラウザのサポートは異なります
loop ループ再生
url 動画URLアドレス
muted MUTE PLAY
マルチメディア タグの概要 audio タグと video タグは基本的に同じように使用されます
Google Chrome ではオーディオとビデオの自動再生が無効になります

video タグに muted 属性を付けて動画はミュートするが、音声はミュートできない（JavaScript で解決）

video タグがポイントで、自動再生を設定することが多く、コントロール制御やループは設定されていません。そして、size 属性を設定します。
  • [関連する推奨事項:
  • css ビデオ チュートリアル
    • ]

以上がHTML5の新しいマルチメディアタグの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事はjianshu.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：html5のDoctype宣言とは何ですか？次の記事：html5のDoctype宣言とは何ですか？

関連記事

続きを見る