<video>要素

<video>要素の定義

英語で「動画」を表す、”video”より。
HTML文書では、文書内に動画コンテンツを埋め込んで表示する際に使用します。
基本的には、src属性で動画コンテンツのファイルを指定しますが、ブラウザーがすべての動画形式に対応しているとは限りません。
それに備えて、<source> 要素で複数のソースファイルを指定でき、ブラウザーは対応している最初のものを使用します。

子要素として使用できるもの

• src属性をもつ場合：0個以上の <track> 要素とそれに続くメディア要素を含まない透過的コンテンツ。
• その他の場合：0個以上の <source> 要素、0個以上の <track> 要素、メディア要素を含まない透過的コンテンツ。

いずれの場合も、<audio> 要素や <video> 要素を子孫要素に配置することは出来ません。

親要素として使えるもの

埋め込みコンテンツを受け入れるすべての要素。

許可されているARIAロール

application

DOMインターフェース

HTMLVideoElement

属性

グローバル属性が指定できます。

autoplay

論理属性で、この属性が指定された場合、データの読み込みが完了し、再生可能になった時点で、コンテンツの再生が始まります。

buffered

メディアがどれだけの時間分バッファリングされたかを判断するために、読み取ることが可能な属性です。この属性は TimeRanges オブジェクトを持ちます。

controls

論理属性で、この属性が指定された場合、再生、音量、シーク、ポーズの各機能を制御するコントロールを表示します。

crossorigin

関連する動画の取得の際に、CORS （オリジン間リソース共有、 Cross-Origin Resource Sharing）を使用しなければならないかを示します。CORS を有効にしていると、汚染されること無く、<canvas> 要素で画像を再利用できます。

• anonymous （デフォルト）：オリジン間要求 (Origin: HTTP ヘッダーを持つ要求) を実行しますが、信用情報 (Cookie、 X.509 証明書、 HTTP ベーシック認証など) は送信しません。サーバーがそのオリジンのサイトに信用情報を付与しない (HTTP の Access-Control-Allow-Origin ヘッダーの設定がない) 場合は、画像が汚染され、その使用も制限されます。
• use-credentials ：信用情報を伴ってオリジン間要求 (HTTP の Origin ヘッダーを持つ要求) を送信します (Cookie、証明書、 HTTP ベーシック認証を使用します)。サーバーが元のサイトに信用情報を付与しない場合は (HTTP の Access-Control-Allow-Credentials ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。

height

映像の表示領域の高さを、 CSS ピクセル値で指定します。 (絶対値に限ります。パーセント値は不可。)

loop

論理属性で、指定された場合、ブラウザーは映像の末尾に達すると、自動的に先頭に戻ります。

muted

論理属性で、映像に含まれる音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。

preload

列挙型で、データを事前に読み込むかどうかのヒントを示します。（この指定通りに動作するかはブラウザによります）

• none ： 映像を事前に読み込むべきではないことを示します。
• metadata ： 再生時間など、映像のメタデータを読み込むことを示します。
• auto ： ユーザーが映像データを使用しないと思われる場合でも、ファイル全体をダウンロードしても良いことを示します。

既定値はブラウザによって異なりますが、仕様書では”metadata”とすることが推奨されています。

playsinline

論理属性で、映像を「インライン」で再生する、すなわち要素の再生エリア内で再生するかを指定します。

poster

映像のダウンロード中に表示される画像の URL です。この属性が指定されない場合、最初のフレームが利用可能になるまで何も表示されず、その後、最初のフレームをポスターフレームとして表示します。

src

埋め込む映像コンテンツの URL を指定します。

width

映像の表示領域の幅を、 CSS ピクセル値で指定します。 (絶対値に限ります。パーセント値は不可。)

サンプル

TBD