video 要素

4.7.6 video 要素

カテゴリー:
フロー・コンテント
フレージング・コンテント
エンベッディッド・コンテント
要素が controls 属性を持つ場合: インタラクティブ・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
エンベッディッド・コンテントが期待される場所
コンテントモデル:
この要素に src 属性がある場合: 0 個以上の track 要素に続き、トランスペアレント。ただし、子孫にメディア要素が存在しないこと。
この要素に src 属性がない場合: 0 個以上の source 要素に続き、0 個以上の track 要素、それから、トランスペアレント。ただし、子孫にメディア要素が存在しないこと。
コンテント属性:
グローバル属性
src - リソースのアドレス
crossorigin - 要素がクロスオリジンのリクエストをどう扱うのか
poster - ビデオ再生の前に表示するポスターフレーム
preload - メディアリソースがどれくらいのバッファリングを必要としそうなのか
autoplay - ページがロードされたときにメディアリソースが自動的に開始できるというヒント
mediagroup - 1 つの暗黙的な MediaControllerメディア要素をまとめてグループ化する
loop - メディアリソースをループするかどうか
muted - デフォルトでメディアリソースをミュートするかどうか
controls - ユーザーエージェントのコントロールを表示する
width - 水平方向の寸法
height - 垂直方向の寸法
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
application
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
interface HTMLVideoElement : HTMLMediaElement {
           attribute unsigned long width;
           attribute unsigned long height;
  readonly attribute unsigned long videoWidth;
  readonly attribute unsigned long videoHeight;
           attribute DOMString poster;
};

video 要素は、ビデオやムービー、そして、キャプションを伴うオーディオファイルを再生するために使います。

video 要素の中にコンテンツを入れることができます。ユーザーエージェントは、ユーザーにそのコンテンツを見せるべきではありません。これは、video 要素をサポートしていない古いウェブブラウザに向けたものです。こうすることで、古いビデオ用プラグインを試すことができるようにしたり、古いブラウザーを使っているユーザに、ビデオコンテンツにアクセスする方法を知らせるためのテキストを見せたりできるようになります。

とりわけ、このコンテンツは、アクセシビリティの問題を解決するものではありません。弱視、盲(もう)、難聴、聾(ろう)の人、そのほか、肉体的障害や認知障害を持った人でもビデオコンテンツにアクセスできるようにするために、様々な機能が利用可能です。track 要素を使えば、キャプションを、ビデオストリームの中、または、外部ファイルとして組み込んで提供することができます。手話トラックなら、ビデオストリームの中に組み込むこともできますし、mediagroup 属性や MediaController オブジェクトを使って複数の video 要素を同期させながら提供することもできます。オーディオディスクリプションは、別のトラックとしてビデオストリームに組み込むことができますし、video 要素と同じコントローラのスレーブとなる audio 要素の中に別のオーディオ・トラックとして提供することもできますし、WebVTT ファイルを使ったテキスト形式で提供して、track 要素を使ってそれを参照し、ユーザーエージェントによる読み上げと同期させて使うこともできます。WebVTT は、チャプターのタイトルを提供するためにも使えます。メディア要素を全く使わないユーザーに対しては、トランスクリプトや他のテキストオプションを用意して、 video 要素の近くの文章の中で、それらへリンクすることができます。 [WEBVTT]

video 要素はメディア要素ですが、そのメディアデータは、表面上はビデオデータだけれども、オーディオデータが関連づけられている可能性があります。

src, preload, autoplay, mediagroup, loop, muted, controls 属性は、すべてのメディア要素に共通の属性です。

poster 属性は、ユーザーエージェントが利用可能なビデオデータがないときに表示できる画像ファイルのアドレスを与えます。この属性が存在すれば、これは潜在的にスペースで囲まれた空でない妥当な URL でなければいけません。

指定されたリソースが使われることになったら、この要素が生成されたとき、または、poster 属性がセット、変更、削除されたときに、ユーザーエージェントは、この要素のポスターフレームを決定するために、次の手順を実行しなければいけません (この要素のポスター表示フラグの値にかかわらず):

  1. 該当の video 要素に対して実行されているこのアルゴリズムの既存のインスタンスがあれば、ポスターフレームを変更せずに、このアルゴリズムのインスタンスを中止します。

  2. poster 属性の値が空文字列なら、または、その属性が存在しないなら、ポスターフレームはありません。これらの手順を中止します。

  3. poster 属性の値を、該当の要素に対して解決します。これに失敗したら、ポスターフレームはありません。これらの手順を中止します。

  4. この要素の Documentオリジンから、結果として得られた絶対 URLフェッチします。これは、この要素のドキュメントの load イベントを遅延させなければいけません。

  5. 画像を取得できたら、ポスターフレームは、その画像となります。そうでなければ、ポスターフレームはありません。

poster 属性で指定された画像、つまり、ポスターフレームは、そのビデオの代わりになるフレーム(通常は、空でない最初のフレーム)として想定されたもので、それがどんなビデオなのかをユーザに提示するものです。


video 要素は、次のリストの条件のうち最初に一致するものを表します:

ビデオデータがまったく入手できていない場合 (要素の readyState 属性が HAVE_NOTHING、または、HAVE_METADATA だけれども、まだビデオデータはまったく取得できていない、または、要素の readyState 属性が、その後に続く値であるものの、そのメディアリソースがビデオチャンネルを持っていない)
video 要素は、ポスターフレームがあればそれを、なければ、本来の寸法を持たない透明な黒を表します。
video 要素が一時停止になっているとき、現在再生位置がビデオの最初のフレームで、かつ、その要素のポスター表示フラグがセットされている
video 要素は、ポスターフレームがあればそれを、なければ、そのビデオの最初のフレームを表します。
video 要素が一時停止になっており、現在再生位置に対応するビデオのフレームが利用できない場合 (たとえば、ビデオがシーク中やバッファリング中などの理由で)
video 要素が潜在的に再生中でも一時停止でもない場合 (たとえば、シーク中やストールしている場合)
video 要素は、最後にレンダリングされたビデオのフレームを表します。
video 要素が一時停止になっている場合
video 要素は、現在再生位置に対応するビデオのフレームを表します。
上記に該当しない場合 (video 要素がビデオチャンネルを持ち、潜在的に再生中の場合)
video 要素は、連続的に進み続けている "現在の" 位置におけるビデオのフレームを表します。現在再生位置が変化して、最後にレンダリングされたフレームがもうそのビデオの現在再生位置に対応するフレームでないようなら、その新たなフレームがレンダリングされなければいけません。

ビデオストリームのどのフレームが特定の再生位置に対応しているのかについては、そのビデオストリームのフォーマットによって定義されます。

video 要素は、現在再生位置における、テキスト・トラック・キュー・アクティブ・フラグがセットされ、テキスト・トラック表示中モードにあるあらゆるテキスト・トラック・キューや、メディアリソースからのあらゆるオーディオも表します。

メディアリソースに関連付けられたオーディオは、再生するなら、その要素の実効メディア音量で、現在再生位置に同期して再生されなければいけません。

上記に加え、ユーザーエージェントは、テキストやアイコンをビデオ上や、この要素の再生領域の外など適切な場所にオーバーレイして、ユーザーにメッセージ("バッファリング中", "ビデオ未ロード", "エラー" やその他、詳細情報)を提供することができます。

ビデオをレンダリングできないユーザーエージェントは、代わりに、外部のビデオ再生ユーティリティやビデオデータそのものへのリンクを表すことができます。

video 要素のメディアリソースがビデオチャネルを持つとき、その要素は、幅がメディアリソース本来の幅で、高さがメディアリソース本来の高さで、外観が現在再生位置に対応するビデオのフレームとなるペイントソースを提供します。ただし、それが入手可能な場合に限ります。そうでなければ(たとえば、ビデオがシーク中やバッファリング中の場合)、前の外観があれば、それを、なければ(たとえば、ビデオがまだ最初のフレームをロード中)真っ黒な状態を提供します。


video . videoWidth
video . videoHeight

これらの属性はビデオの本来の寸法を返します。寸法が不明なら 0 を返します。

メディアリソース本来の幅本来の高さは、そのリソースで使われるフォーマットに定義されているように、そのリソースの寸法、縦横比、上下の切り捨て領域、解像度などを考慮した後の CSS ピクセルでのリソースの寸法です。もし、アナモフィックなフォーマットが、"正しい"寸法を取得するために、どのようにそのビデオ・データの寸法にアスペクト比を適用すれば良いかを定義していないなら、ユーザーエージェントは、一方の寸法を増やし、もう一方の寸法を変えずに、比率を適用しなければいけません。

videoWidth IDL 属性は、そのビデオの本来の幅を CSS ピクセル単位で返さなければいけません。videoHeight IDL 属性は、そのビデオの本来の高さを CSS ピクセル単位で返さなければいけません。この要素の readyState 属性が HAVE_NOTHING なら、この属性は 0 を返さなければいけません。

ビデオの本来の幅本来の高さが変わるとき (たとえば、選択ビデオトラックが変わったなどの理由も含みます)、要素の readyState 属性が HAVE_NOTHING でないなら、ユーザーエージェントは、そのメディア要素resize という名前のシンプルなイベントを発出するタスクをキューイングしなければいけません。

video 要素はディメンジョン属性をサポートします。

逆に、スタイル規則がない場合、ビデオコンテンツは、そのビデオコンテンツの縦横比を維持したまま、その要素の再生領域の中にぴったりと収めることができる最大のサイズで、その再生領域の中心に位置して表示されるように、レンダリングされるべきです。ゆえに、再生領域の縦横比がビデオの縦横比に一致しないなら、そのビデオはレターボックスまたはピラーボックスが挿入される形で表示されるでしょう。要素の再生領域のうちビデオを含まない領域は、何も表しません。

CSS を実装したユーザーエージェントにおいては、レンダリングのセクションで推奨されているスタイル規則を使って上記の要件を実装することができます。

video 要素の再生領域の本来の幅は、ポスターフレームが利用可能で、その要素がその時点でポスターフレームを表しているなら、その本来の幅となります。そのビデオリソースが利用可能なら、その本来の幅となります。そうでなければ、本来の幅はありません。

video 要素の再生領域の本来の高さは、ポスターフレームが利用可能で、その要素がその時点でポスターフレームを表しているなら、その本来の高さとなります。そのビデオリソースが利用可能なら、その本来の高さとなります。そうでなければ、本来の高さはありません。

デフォルトのオブジェクトサイズは、幅が 300 CSS ピクセルで、高さが 150 CSS ピクセルです。 [CSSIMAGES]


ユーザーエージェントは、ビデオストリームと結びづけられた字幕やナレーション用トラックや付随データの表示を有効または無効にすることができるのコントロールを提供するべきです。ただし、このような機能が、返って、通常のページレンダリングを妨げてしまうことがないようにするべきです。

ユーザーエージェントは、ユーザー自身にとってもっと便利にビデオコンテンツを見ることができるようにすることができます(例えば、フルスクリーン表示や、リサイズ可能な独立したウィンドウで表示)。他のユーザーインタフェース機能に関しては、それを有効にするコントロールが、ユーザーエージェントがユーザーインタフェースを見せていない限り、通常のページレンダリングを妨げないようにするべきです。しかし、独立したコンテキストでは、ユーザーエージェントは、たとえ controls 属性がなかったとしても、例えば、再生、一時停止、早送り、ボリューム調整といったユーザーインタフェースを見せることができます。

ユーザーエージェントは、ビデオが再生されているときに、そのユーザー体験を妨げてしまうようなシステム機能に対して、対策を講ずることができます。例えば、ユーザーエージェントは、ビデオ再生中に、スクリーンセーバーを無効にすることができます。


poster IDL 属性は、poster コンテント属性を反映しなければいけません。

この例は、ビデオの再生に失敗したときを適切に検知する方法を示したものです:

<script>
 function failed(e) {
   // ビデオ再生が失敗しました - 理由を言うメッセージを表示
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('あなたがビデオ再生を中止しました。');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('ネットワークエラーのため、ビデオのダウンロードが途中で失敗しました。');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('ビデオ再生が中止されました。データが壊れているか、あなたのブラウザーが対応していない機能をビデオが使っています。');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('ビデオをロードできませんでした。サーバーまたはネットワークのエラーか、未サポートの形式です。');
       break;
     default:
       alert('未知のエラーが発生しました。');
       break;
   }
 }
</script>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
<p><a href="tgif.vid">ビデオファイルをダウンロード</a>.</p>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-video-element