最終更新日

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要素内に別のメディア要素を含むことはできません。

HTML5での変更点
・video要素は、HTML5で追加された新しい要素です。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Phrasingコンテンツ
Embeddedコンテンツ
(Interactiveコンテンツ)
省略不可 Embeddedコンテンツを子にできる要素 src属性あり:trackTransparent
src属性なし:sourcetrackTransparent
属性 説明
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>
参考文献:W3C HTML5「4.8.6 The video element」外部リンク
HOME