video要素
video要素は字幕付きビデオやムービー、オーディオファイルを再生するために使用されます。
video要素のコンテンツは、video要素をサポートしていない古いウェブ・ブラウザに向けて、古いビデオ用プラグインを試すことができるようにしたり、古いブラウザを使っているユーザに、ビデオ・コンテンツにアクセスする方法を知らせるためのテキストをコンテンツとすることができます。ただし、このコンテンツは、アクセシビリティの問題を解決するものではありません。
src属性
src属性は、表示するメディアリソース（ビデオ、オーディオ）のアドレスを指定します。
width属性、height属性
width属性はリソースの幅、height属性は高さを指定します。値は負以外の整数（ピクセル）ですが、単位の（px）はつけません。
例）
<video src="sample.mp4" width="320" height="180" controls><a href="http://example.com/sample.mp4">動画へのリンクです。</a></video>
poster属性
poster属性は、ビデオ・データが利用できない場合に、ユーザー・エージェントが表示する画像ファイルのアドレスを指定します。なお、poster属性で指定する画像ファイルは、ユーザーがどのような映像なのか想像できるような、ビデオの代表的なフレームを使うことが推奨されています。
preload属性
preload属性は、メディア・リソースのバッファリングのときの、以下のキーワードに対応する内容をユーザー・エージェントに伝えます。この属性が指定が無い場合のデフォルトはユーザー・エージェントの定義となります。
また、preload属性よりもautoplay属性が優先されますが、両方の指定があってもエラーにはなりません。
キーワード
- none
ユーザーが、メディア・リソースを必要とするとは期待していない、または、サーバーの不必要なトラフィックを最小化したい、ということをユーザー・エージェントに伝えます。 - metadata
ユーザーが、メディアリソースを必要とするとは期待していないが、リソースのメタ・データ（再生時間、トラック・リストなど。）を読み込んでも良い（ただし、帯域幅の不足を考慮しつつ。）ことをユーザー・エージェントに伝えます。 - auto
リソースすべてのダウンロードも含め、ユーザーのニーズに合わせてバッファリングしても良いことをユーザー・エージェントに伝えます。なお、空の文字列も有効なキーワードで、これを値にした場合もautoと同じ意味になります。
mediagroup属性
mediagroup属性は、暗黙的にMediaControllerを作成することによって、複数のvideo要素やaudio要素をリンクします。値はテキストで、同じ値を持つvideo要素やaudio要素はユーザー・エージェントによって自動的にリンクされます。
autoplay属性
autoplay属性は、属性が存在するときに、ユーザー・エージェントに、停止することなく、できるだけ早く自動的にメディア・リソースの再生を開始するように伝えるブーリアン属性です。
loop属性
loop属性は、属性が存在するときに、メディア・リソースの最後に到達すると先頭に戻ってシーク、いわゆるエンドレス再生を指定する、ブーリアン属性です。
muted属性
muted属性は、属性が存在するときに、潜在的にユーザー設定を上書きし、オーディオ出力のデフォルトの状態を制御し、音声を出さない、いわゆるミュート状態で再生する、ブーリアン属性です。
controls属性
controls属性は、属性が存在するときに、ユーザー・エージェントに独自の再生ボタンや停止ボタンなどのコントローラーを提供するように伝える、ブーリアン属性です。
例）自動再生をしますが、音はなしで再生し、ユーザーが音声をオンにできるように指定しています。
<video src="sample.mp4" controls autoplay loop muted></video>
video要素でサポートされているメディアフォーマットについて。
video要素は、プラグインを必要としないビデオの再生サポートを提供します。
しかしながら、主に特許の問題によりブラウザのvideo要素の実装において、それぞれのブラウザで同一のメディア形式をサポートするのは難しい状況のようです。
そのため、主要なブラウザの最新バージョンでvideo要素を使うには、以下の例のように、異なる形式のビデオを用意し、source要素で指定します。例では、WebM形式と、MP4形式のふたつのビデオファイルを指定しています。
例）
<video controls> <source src="sample.webm" type="video/webm"> <source src="sample.mp4" type="video/mp4"> <a href="http://example.com/sample.mp4">動画へのリンクです。</a> </video>
参考、詳細：Mozilla Developer Network HTML5のaudio要素とvideo要素でサポートされているメディアフォーマット
- カテゴリ
- フロー・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツ、インタラクティブ・コンテンツ（controls属性を持つ場合）、パルパブル・コンテンツ。
- 要素を使用することができる場所
- エンベッディッド・コンテンツ。
- コンテンツ モデル（内容に含めることのできる要素）
- src属性がある場合は、0個以上の track要素に続き、以降トランスペアレント。ただし、子孫にメディア要素（video要素やaudio要素）が存在しないこと。
- src属性がない場合は、0個以上の source要素に続き、0個以上のtrack要素、以降トランスペアレント。ただし、子孫にメディア要素（video要素やaudio要素）が存在しないこと。
- コンテンツ属性
- グローバル属性、src属性、crossorigin要素、poster属性、preload属性、autoplay属性、mediagroup属性、loop属性、muted属性、controls属性、width属性、height属性。