最終更新日 
video要素
video要素は、HTML5で定義されている「メディア要素」の1つであり、ドキュメント内でのビデオや映画など動画の再生について指定します。要素内のコンテンツは主にvideo要素に対応していない古いブラウザ用で、ユーザーのためのテキスト情報などを含めることができます。
src属性は、読み込むメディアリソースのURLを指定します。
preload属性は、読み込むビデオファイルの情報を以下のキーワードで指定できます。
none：事前情報を読み込まない
metadata：リソースのメタデータのみ読み込む
auto：自動
preload属性を空の文字列で指定した場合は、autoと同様の値になります。preload属性を省略したときの既定値は、ブラウザの定義により決まります。
autoplay属性を指定すると、ブラウザにより自動的にメディアの再生が始まります。音声読み上げブラウザの場合などは、autoplay属性を使うことで、ユーザーが望まないスクリプトを使った自動再生を上書き可能です。ただし、ユーザー自身が再生の開始を選べるようにするために、自動再生の機能は使う前によく検討することが推奨されています。
loop属性を指定すると、video要素のメディアリソースが最後まで達すると開始の位置に戻ります。
また、controls属性を指定すると、ブラウザによる音声や再生のコントロール機能を利用することができます。muted属性は、メディアリソースの音声チャネルにおける初期状態の制御を可能にします。指定した場合、初期の音量状態が消音に設定される仕様です。
poster属性は、ビデオデータが利用できない場合に表示されるイメージ画像ファイルのアドレスをURLで指定します。
mediagroup属性は、複数のメディア要素をまとめてグループ化し、リンクを設定できるようにします。値には、グループ名を指定します。
video要素は、Embeddedコンテンツの記述箇所で使用できます。
video要素内に別のメディア要素を含むことはできません。
| カテゴリ | タグの省略 | 親要素 | 子要素 |
|---|---|---|---|
|
Flowコンテンツ Phrasingコンテンツ Embeddedコンテンツ (Interactiveコンテンツ) |
省略不可 | Embeddedコンテンツを子にできる要素 |
src属性あり：track、Transparent src属性なし：source、track、Transparent |
| 属性 | 値 | 説明 |
|---|---|---|
| src | URL | ビデオファイルのURLを指定します。 |
| crossorigin | anonymous use-credentials |
要素の取得したデータに関わるCORS(Cross Origin Resource Sharing)リクエストを設定します。値には、anonymous(認証不要)、use-credentials(認証が必要)のいずれかを指定します。属性が指定されていない場合、CORSは利用されません。 |
| poster | URL | ビデオが利用できない場合の代替画像のURLを指定します。 |
| preload | none metadata auto |
ビデオファイルに関する情報を「none」「metadata」「auto」のいずれかのキーワードで指定します。 |
| autoplay | autoplay | 論理属性。ビデオを自動再生させたい場合に指定します。 |
| mediagroup | 文字列 | 複数のメディア要素でメディアグループを作る際のグループ名を指定します。 |
| loop | loop | 論理属性。ビデオを繰り返し再生させたい場合に指定します。 |
| muted | muted | 論理属性。初期の音量を消音に設定します。 |
| controls | controls | 論理属性。ブラウザによるコントロール機能を使う場合に指定します。 |
| width | 数値 | ビデオの幅をピクセルかパーセントで指定します。 |
| height | 数値 | ビデオの高さをピクセルかパーセントで指定します。 |
| グローバル属性 | - | - |
| イベント属性 | - | - |
<body>
<video src="sample.mp4" autoplay controls>
<p>ご利用の環境では動画を再生できません。</p>
<p><a href="sample.mp4">右クリックで動画ファイルを保存して下さい。</a></p>
</video>
</body>
