video 要素
4.8.6 video 要素
Status: Last call for comments. ISSUE-9 (video-accessibility) blocks progress to Last Call
- カテゴリー
- フロー・コンテンツ
- フレージング・コンテンツ
- エンベッディッド・コンテンツ
- この要素が
controls属性を持つ場合: インタラクティブ・コンテンツ - この要素を使うことができるコンテキスト:
- エンベッディッド・コンテンツが期待される場所
- コンテンツモデル:
- この要素が
src属性を持つ場合:トランスペアレント。ただし、子孫にメディア要素が存在しないこと。 - この要素が
src属性を持たない場合:1 個以上のsource要素。その次にトランスペアレント。ただし、子にメディア要素が存在しないこと。 - コンテンツ属性:
- グローバル属性
srcposterpreloadautoplayloopcontrolswidthheight- DOMインタフェース:
-
interface HTMLVideoElement : HTMLMediaElement { attribute DOMString width; attribute DOMString height; readonly attribute unsigned long videoWidth; readonly attribute unsigned long videoHeight; attribute DOMString poster; };
video 要素は、ビデオやムービーを再生するために使います。
video 要素の中にコンテンツを入れることができます。ユーザーエージェントは、ユーザーにそのコンテンツを見せるべきではありません。それは、video 要素をサポートしていない古いウェブブラウザに向けたものです。古いビデオ用プラグインを試すことができるようにしたり、古いブラウザーを使っているユーザに、ビデオコンテンツにアクセスする方法を知らせるためのテキストを見せたりします。
とりわけ、このコンテンツは、アクセシビリティの問題を解決するものではありません。目が不自由な人や耳が不自由人、そのほか、肉体的障害や認知障害を持った人でもコンテンツにアクセスできるようにするために、ウェブ制作者は、メディアストリームを選択できるようにしたり、アクセシビリティ支援(説明文や字幕)をメディアストリームの中に組み込んだりすることが期待されます。
video 要素はメディア要素ですが、そのメディア・データは表面上はビデオデータだけれども、オーディオ・データが関連づけられている可能性があります。
src, preload, autoplay, loop, controls 属性は、すべてのメディア要素に共通の属性です。
poster 属性は、ユーザーエージェントが利用可能なビデオデータがないときに表示できる画像ファイルのアドレスを与えます。この属性が存在すれば、これは妥当な URL でなければいけません。指定のリソースが使われることになったら、この要素が生成されるとき、または、poster 属性がセットされるとき、その値はその要素に対して解決されなければいけません。そして、それが成功したら、解決の結果となる絶対 URL がこの要素の Document のオリジンからフェッチされなければいけません。これによって、この要素のドキュメントの load イベントを遅らせなければいけません。ポスター・フレームは、もしあれば、そのリソースから取得された画像となります。
poster 属性で指定された画像、つまり、ポスター・フレームは、そのビデオの代わりになるフレーム(通常は、空でない最初のフレーム)として想定されていますが、それがどんなビデオなのかをユーザに提示するものです。
poster IDL
属性は、poster コンテンツ属性を反映しなければいけません。
利用可能なビデオデータがない(要素の readyState 属性が HAVE_NOTHING または HAVE_METADATA のいずれかであるが、まだビデオ・データを全く取得できていない)とき、その video 要素は、ポスター・フレームを表す、もしくは、何も表さない、のいずれかとなります。
video 要素が一時停止され、現在の再生位置がビデオの最初のフレームなら、この要素は、現在の再生位置に相当するビデオ・フレームか、ポスター・フレームかのいずれかを表しますが、どちらかについてはブラウザに任されます。
上記にかかわらず、ポスター・フレームは何に対しても優先されるべきではありません。しかし、ポスター・フレームは、ビデオ・フレームが表示されたら、その後に再び表示されるべきではありません。
video 要素が他のどこの位置で一時停止されても、この要素は、現在の再生位置に相当するビデオフレームを表します。また、それがまだ利用可能でないなら(例えば、そのビデオがシーク中やバッファリング中の場合)、それは、そのビデオの最後にレンダリングされたフレームを表します。
video 要素が潜在的に再生中のとき、それは、連続的に増え続けている "現在" の位置のビデオフレームを表します。現在の再生位置が変わってしまい、最後にレンダリングされたフレームがもうそのビデオの現在の再生位置に対応するフレームでないとき、新しいフレームがレンダリングされなければいけません。同様に、そのビデオと結び付けられているオーディオも、それが再生されるなら、指定のミュート状態を伴った指定のボリュームで、現在の再生位置と同期して再生されなければいけません。
video 要素が 潜在的に再生中でも一時停止でもなければ(例えば、シーク中やコマ送り)、この要素は、レンダリングされた最後のビデオフレームを表します。
特定の再生位置に対応するフレームがビデオ・ストリームのどこになるかは、ビデオ・ストリームのフォーマットで定義されます。
上記に加え、ユーザーエージェントは、ビデオにテキストやアイコンをオーバーレイしたり、この要素の再生領域の外など適切な場所に表示したりして、ユーザーにメッセージ("バッファリング中", "ビデオ未ロード", "エラー" やその他、詳細情報)を提供することができます。
ビデオをレンダリングできないユーザーエージェントは、代わりに、外部のビデオ再生ユーティリティやビデオデータそのものへのリンクを表すことができます。
- video .
videoWidth - video .
videoHeight -
これらの属性はビデオの本来の寸法を返します。寸法が不明なら 0 を返します。
メディアリソースの本来の幅と本来の高さとは、そのリソースで使われるフォーマットに定義されているように、そのリソースの寸法、縦横比、上下の切り捨て領域、解像度などを考慮した後の CSS ピクセルでのリソース寸法です。もし、アナモフィックなフォーマットが、"正しい"寸法を取得するために、どのようにそのビデオ・データの寸法にアスペクト比を適用すれば良いかを定義していないなら、ユーザーエージェントは、一方の寸法を増やし、もう一方の寸法を変えずに、比率を適用しなければいけません。
videoWidth IDL 属性は、そのビデオの本来の幅を CSS ピクセル単位で返さなければいけません。videoHeight IDL 属性は、そのビデオの本来の高さを CSS ピクセル単位で返さなければいけません。この要素の readyState 属性が HAVE_NOTHING なら、この属性は 0 を返さなければいけません。
ビデオ・コンテンツは、そのビデオ・コンテンツの縦横比を維持したまま、その要素の再生領域の中にぴったりと収めることができる最大のサイズで、その再生領域の中心に位置して表示されるように、レンダリングされるべきです。ゆえに、再生領域の縦横比がビデオの縦横比に一致しないなら、そのビデオはレターボックスまたはピラーボックスが挿入される形で表示されるでしょう。ビデオを含まないこの要素の再生領域は、何も表しません。
video 要素の再生領域の本来の幅は、そのビデオ・リソースが利用可能なら、そのビデオ・リソースの本来の幅となります。そうでなければ、それは、ポスター・フレームが利用可能なら、そのポスター・フレームの本来の幅となります。そうでなければ、それは、CSS 単位の 300 ピクセルとなります。
video 要素の再生領域の本来の高さは、そのビデオ・リソースが利用可能なら、そのビデオ・リソースの本来の高さとなります。そうでなければ、それは、ポスター・フレームが利用可能なら、そのポスター・フレームの本来の高さとなります。そうでなければ、それは、CSS 単位の 150 ピクセルとなります。
ユーザーエージェントは、ビデオ・ストリームと結びづけられた字幕やナレーション用トラックや付随データの表示を有効にするか無効にするかのコントロールを提供するべきです。ただし、このような機能が、返って、通常のページレンダリングを妨げてしまうことがないようにするべきです。
ユーザーエージェントは、ユーザー自身にとってもっと便利にビデオ・コンテンツを見ることができるようにすることができます(例えば、フルスクリーン表示や、リサイズ可能な独立したウィンドウで表示)。他のユーザーインタフェース機能に関しては、それを有効にするコントロールが、ユーザーエージェントがユーザーインタフェースを見えるようにしていない限り、通常のページレンダリングを妨げないようにするべきです。しかし、独立したコンテキストでは、ユーザーエージェントは、たとえ controls 属性がなかったとしても、例えば、再生、一時停止、早送り、ボリューム調整といったユーザーインタフェースを見えるようにすることができます。
ユーザーエージェントは、ビデオが再生されているときに、そのユーザー体験を妨げてしまうようなシステム機能に対して、対策を講ずることができます。例えば、ユーザーエージェントは、ビデオ再生中に、スクリーンセーバーを無効にすることができます。
ユーザーエージェントは、ビデオをフルスクリーンで表示させるような公開 API を提供するべきではありません。スクリプトは、うまく作られたビデオファイルと連携することで、システムのモーダルのダイアログが表示されたとユーザーを勘違いさせ、ユーザーにパスワードの入力を促すといったことが可能となります。リンククリックやページナビゲートでページが表示されたとき、フルスクリーンビデオを開始するといった、ただ単にうっとうしいというだけのものもあります。代わりに、ユーザーエージェント固有のインタフェース機能を提供して、ユーザーが簡単にフルスクリーン再生モードにすることができるようにすることができます。
この例は、ビデオの再生に失敗したときを適切に検知する方法を示したものです:
<script>
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
break;
default:
alert('An unknown error occurred.');
break;
}
}
</script>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
<p><a href="tgif.vid">Download the video file</a>.</p>
※ 原文:http://www.w3.org/TR/2010/WD-html5-20100304/video.html#video