video 要素

by 3 contributors:

HTML5 で導入

概要

video 要素は HTML もしくは XHTML 文書に映像コンテンツを埋め込むために用いられます。 video 要素は HTML 5 の一部として導入されました。

サポートしている形式の一覧については、HTML5 の audio 要素と video 要素でサポートされているメディアフォーマットをご覧ください。

使用可能な場所

許可された内容 トランスパレントコンテンツsrc 属性または 1 個以上の <source> 要素、その後に <video> 要素または <audio> 要素を除く フローコンテンツ または フレージングコンテンツ
タグの省略 不可。開始タグと終了タグの両方が必要です。
許可された親要素 フローコンテンツを受け入れるすべての要素、またはフレージングコンテンツを受け入れるすべての要素。
標準文書 HTML5, section 4.8.6

属性

autoplay
ブール型。この属性が指定された場合、データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。
autobuffer
ブール型。この属性が指定された場合、自動再生が無効である場合でも映像のバッファリングを自動開始します。この属性は、映像が再生される可能性が高いと考えられる場合 (例えばユーザを、他のコンテンツともに映像を埋め込んでいるページではなく映像の再生に特化したページへ案内する場合) に使用するべきです。映像はメディアキャッシュを満たすまでバッファリングされます。
実装メモ: autobuffer 属性は HTML5 仕様の初期の草案に存在していましたが、最新の版では削除されています。Gecko 2.0 および他のブラウザでは廃止されており、また一切実装されていないブラウザもあります。仕様では autobuffer 属性を置き換える新たな列挙属性 preload を、別の構文で定義しています。バグ 548523
buffered
メディアがどれだけの時間分バッファリングされたかを判断するために、読み取ることが可能な属性です。この属性は TimeRanges オブジェクトを持ちます。
controls
この属性が指定された場合、再生・一時停止、音量、シーク、ポーズの各機能を制御するコントロールを表示します。
crossorigin
この列挙型の属性は、関連画像を CORS を使用して取得しなければならないか、そうでないかを示します。CORS が有効なリソースは、汚染されることなく <canvas> 要素で再利用できます。次の値が使用できます:
anonymous
クロスオリジン要求 (Origin: HTTP ヘッダを持つ要求) が実行されます。ただし、信用情報は送信されません (Cookie、X.509 証明書、HTTP ベーシック認証は利用されません)。サーバが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Origin: HTTP ヘッダの設定なし)、画像が汚染され、その使用も制限されます。
use-credentials
クロスオリジン要求 (Origin: HTTP ヘッダを持つ要求) が実行され、信用情報が送信されます (Cookie、証明書、HTTP ベーシック認証が利用されます)。サーバが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Credentials: HTTP ヘッダに関わらず)、画像が汚染され、その使用も制限されます。
この属性が提供されない場合、リソースは CORS 要求なしで取得され (Origin: HTTP ヘッダを送信せずに取得)、<canvas> 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が指定されたものとして扱われます。追加の情報は CORS 設定属性を参照してください。
height
映像の表示領域の高さを指定します。 CSS ピクセルで指定します。
loop 未実装 バグ 449157
ブール型。この属性が指定された場合、コンテンツの終端に達すると自動的に先頭位置に戻ります。
muted
映像に含まれる音声のデフォルト設定を示すブール型属性です。この属性を設定すると、初期状態が消音になります。既定値は false であり、映像再生時に音声も再生することを表します。
played
再生済みの映像の範囲を示す TimeRanges オブジェクトです。
preload
この列挙属性は、最良のユーザエクスペリエンスに関する作者の考えについて、ブラウザにヒントを与えるものです。以下の値のうちひとつを持つことができます:
  • none: ユーザはその映像を見る必要がないであろうと作者は考えているか、サーバでトラフィックを最小化したいことを示します。言い換えると、これは映像をキャッシュすべきではないことを示します。
  • metadata: ユーザはその映像を見る必要はないが、メタデータ (例えば長さ) を取得することは合理的であると作者が考えていることを示します。
  • auto: ユーザにとって必要性があることを示します。言い換えると、ユーザが映像を使用すると予測されない場合でも、必要であれば映像全体をダウンロードしてよいということを示します。
  • 空文字列: これは auto 値と同義です。

この属性を設定しない場合の既定値はブラウザが定義します (つまり、ブラウザが自身の既定値を選択できます) が、仕様書では metadata に設定するであろうと助言しています。

使用上の注意:
  • autoplay 属性はこの属性より優先します。これは、映像を自動的に再生したい場合は明らかにブラウザが音声をダウンロードしなければならないためです。仕様書では autoplay 属性と preload 属性を両方とも指定することを認めています。
  • ブラウザは、この属性の値に従うことを仕様書によって強制されていません。これは単なるヒントです。
poster 未実装 バグ 449156
映像データが利用不可能な場合に表示される画像データを URI 形式で指定します。この属性が指定されない場合、再生可能な映像データがない場合は何も表示されません。
src
埋め込む映像コンテンツへの URL を指定します。
width
映像の表示領域の幅を指定します。 CSS ピクセルで指定します。

先頭からの経過時間(秒)は浮動小数点型(float)で指定します。

注意: 先頭からの経過時間については、まだ HTML 5 での定義が完了していないため、今後仕様が変更される恐れがあります。

<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos, 
  but don't worry, you can <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

1 番目の例では、データのダウンロードのために再生途中に一時停止する必要がない程度までデータを受信できると、自動的に再生が始まります。また映像の再生が始まるまで、その場所に画像 "posterimage.jpg" を表示します。

2 番目の例では、ユーザがさまざまな字幕を選択できます。

サーバのサポート

サーバで映像の MIME type が適切に設定されていないと、映像が表示されないか X 印がついた灰色のボックスが表示される (JavaScript が有効である場合) 可能性があります。

Ogg Theora 形式で映像を提供する場合、Apache Web Server では "/etc/apache" の "mime.types" ファイルまたは httpd.conf の "AddType" ディレクティブで映像ファイルの拡張子 (一般的には ".ogm", ".ogv", ".ogg") を MIME type "video/ogg" に追加することで問題が解決します。

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

WebM 形式で映像を提供する場合、Apache Web Server では "/etc/apache" の "mime.types" ファイルまたは httpd.conf の "AddType" ディレクティブで映像ファイルの拡張子 (一般的には ".webm") を MIME type "video/webm" に追加することで問題が解決します。

AddType video/webm .webm

Web ホスティングサービスでは、全体の更新が行われるまでの間、新技術向けに MIME type の設定を変更するための簡単なインターフェイスを提供しているかもしれません。

DOM インターフェイス

この要素は HTMLVideoElement インターフェイスを提供します。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 3.0 3.5 (1.9.1) 9.0 10.5 3.1
autoplay 属性 3.0 3.5 (1.9.1) 9.0 10.5 3.1
buffered 属性 ? 4.0 (2.0) ? Yes ?
controls 属性 3.0 3.5 (1.9.1) 9.0 10.5 3.1
loop 属性 3.0 11.0 (11.0) 9.0 10.5 3.1
muted 属性 ? 11.0 (11.0) ? Yes ?
played プロパティ ? 15.0 (15.0) ? Yes ?
poster 属性 3.0 3.6 (1.9.2) 9.0 10.5 3.1
preload 属性 3.0 4.0 (2.0) 9.0 Yes 3.1
src 属性 3.0 3.5 (1.9.1) 9.0 10.5 3.1
crossorigin 属性 ? 12.0 (12.0) ? ? ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? 1.0 (1.0) ? ? ?
autoplay 属性 ? 1.0 (1.0) ? ? iOS 6.0 only
buffered 属性 ? 4.0 (2.0) ? ? ?
controls 属性 ? 1.0 (1.0) ? ? ?
loop 属性 ? 11.0 (11.0) ? ? ?
muted 属性 ? 11.0 (11.0) ? ? ?
played プロパティ ? 15.0 (15.0) ? ? ?
poster 属性 ? 1.0 (1.0) ? ? ?
preload 属性 ? 4.0 (2.0) ? ? ?
src 属性 ? 1.0 (1.0) ? ? ?
crossorigin 属性 ? 12.0 (12.0) ? ? ?

参考資料

ドキュメントのタグと貢献者

Contributors to this page: yyss, ethertank, RobinEgg
最終更新者: yyss,