備忘録的プログラミングリファレンス

video タグエレメント

　video タグエレメントは、ビデオクリップやビデオストリームといった動画をwebページに埋め込むための HTML タグエレメントです。

　サポートされているオーディオファイル形式には、MP4があります。WebM、OGGはsafariのみが対応していません。

　属性によってコントロールパネルを付加したり、繰り返し再生、停止時の画像表示などができます。

video タグエレメント 自動再生のみ
<video src="example.mp4" autoplay muted>
	ご使用のブラウザはvideoエレメントに対応していません
</video>
詳しくは動作の確認を参照してください

　video タグエレメントに対応していないブラウザ用に、<video>、</video>の間にテキストを定義できます。対応していないブラウザではこの innerText が表示されます。

　youtube といった動画は、<iframe>エレメントを使って取り込むことが推奨されているようです。

　<source> エレメントでブラウザの対応ソースごとに条件分けができます。

<video>に<source>エレメントを利用
<video autoplay muted>
	<source src="video.webm"></source>
	<source src="example.mp4"></source>
</video>

　字幕には track タグエレメント を使用します。

　音声には<audio>エレメントを使うようにしましょう。

Syntax

<video src="URL"  autoplay muted>
	ご使用のブラウザはvideoエレメントに対応していません
</video>

　この例では、URLの動画を自動再生します。 もし動画に対応していいないブラウザはご使用のブラウザはvideoエレメントに対応していませんと表示されます。

属性

　グローバル属性も持ちます。以下に主な属性のみを示します。

　以下の選択で最適な属性の設定をします。設定したら動作の確認のHTML作成で属性の指定によるvideo タグエレメントを作成します。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。
srcオーディオデータのソースURL。
autoplayロード次第、自動再生する。
controlsコントロールパネルを表示。
loop自動繰り返し。
muted初期は無音設定
playsinlineインライン再生。スマートフォン用
poster動画ソースのロードや再生までの待ち画像。
preloadページのロードと同時にオーディオデータもロードするか。autoplayと合わせて定義はできない。
innerTextaudioエレメント未対応時の代替テキスト。

動作の確認

　デフォルトの設定では、動画ソースのURLがURLですので動画用コントロールは表示されますがなにも再生できません。

JavaScript

　JavaScript ( DOM )では、HTMLVideoElement が該当します。詳しくは HTMLVideoElement を参照しください。

関連（Related）