目次に戻る

video要素:HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性
  • src→動画のリソースを示す妥当なURL
  • poster→動画が再生できない場合の代替画像データのURL
  • autoplayブーリアン属性。自動再生する場合に指定。
  • controlsブーリアン属性ブラウザ等によるデフォルトプレーヤーコントロールを表示させたい場合に指定。
  • crossorigin→値は下記のとおりで、も可。の場合は、anonymousと同等。デフォルトは、anonymous。別オリジン(→別ドメインなど)からの読み込みに対して、ユーザー認証情報の要否を指定する。
    • anonymousユーザー認証情報を求めない。
    • use-credentialsユーザー認証情報を求める。
  • loopブーリアン属性。ループ再生させたい場合に指定。
  • mutedブーリアン属性デフォルトでは音を鳴らさない場合に指定。
  • playsinlineブーリアン属性。指定された場合は、動画がデフォルトではHTML文書内にインラインで表示されるべきだということをユーザーエージェントに対して示唆する。ただし、これが指定されてないからといって、フルスクリーン表示などがデフォルトになるわけではない。
  • preload→値は下記のとおり。リソースを事前に読み込むか否かのヒントを示す。の場合は、autoと同等。デフォルトは、ユーザーエージェントによる。
    • noneメディアリソースが必ずしも再生されるとは限らない旨、又は不必要なトラフィックを避けたい旨を、ユーザーエージェントに示唆する。
    • metadata→事前に読み込むべきはメディアリソースメタデータだけである旨を、ユーザーエージェントに示唆する。
    • auto→閲覧者のニーズを優先してメディアリソースを事前に読み込んでおいてもよい旨を、ユーザーエージェントに示唆する。
  • widthpx単位の幅を指定する非負整数。単位はつけない。デフォルトは、300
  • heightpx単位の高さを指定する非負整数。単位はつけない。デフォルトは、150
  • itemprop属性がある場合は、src属性は必須。

W3C : HTML5.3:下記の属性が許容されていた。

  • disableRemotePlaybackブーリアン属性。リモートでの再生及びユーザーインターフェースの提示を許さない場合に指定。

W3C : HTML5.3:下記の属性が存在してなかった。

  • playsinline
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、なし。
  • デフォルトrole以外では、applicationを指定可。
視覚系ブラウザデフォルトとして期待されるCSS

  video {object-fit: contain;}
  
視覚系ブラウザにおいて期待されるレンダリング
  • 指定された動画を表示。
  • height属性値及びwidth属性値レンダリングのヒントとして用いる。
  • poster属性がある場合は、動画が表示可能になるまでの間、当該属性値で指定された画像を表示。
  • プレーヤーコントロールは、ページレイアウトを変更しないように重ねて表示し、閲覧者がそれを必要としない場合は消す。
  • デフォルトプレイヤーコントロールは、再生、一時停止、任意の再生時点への移動、音量変更、track要素による字幕等の表示・非表示・変更、表示方式の変更(フルスクリーン表示、独立ウィンドウ表示など)の機能を含むべきである。
  • track要素で指定された字幕は、動画画面に重ねて表示。
  • 指定された動画が無効な場合(あるいは、動画ではない場合)で、poster属性がある場合は、当該属性値で指定された画像を表示。
  • 指定された動画が無効な場合(あるいは、動画ではない場合)で、poster属性がない場合は、透明な黒い画面を表示。
  • 要求された動画を再生できない場合は、外部の動画再生装置で当該動画を再生するためのリンク、又は、動画ファイルそのものへのリンクを表示してもよい。
  • 当該要素内容は、当該要素サポートしないブラウザにおいて、代替コンテンツとして表示される。
ユーザーエージェントに対する特記事項
  • 要求された動画を再生できない場合は、外部の動画再生装置で当該動画を再生するためのリンク、又は、動画ファイルそのものへのリンクを表示してもよい。
  • autoplay属性を実装する義務はない。また、ユーザーによる設定がそれを要求している場合は、autoplay属性を無視することが推奨される。
  • preload属性を無視してもよい。
  • W3C :HTML5.3: 字幕表示や手話動画表示などで聴覚障害者等に対してアクセシビリティを確保するために必要であるから、audio要素で再生できる音声ファイル形式を、video要素でも再生できるようにすべきである旨が明記されていた。
意味・用法

字幕を伴いうる動画・音声の再生に用いる。

この要素は、まずもって動画を表すMedia elementであるが、たいていは関連する音声も伴う。

メディアリソースは、src属性又はsource要素によって指定される。

アクセシビリティ関連

私見・補足

有声動画、無声動画、単なる音声のいずれをも再生可能。

いきなり音を鳴らすのは望ましくないので、autoplay属性は指定せずに、controls属性をつけておく方がよい。

表示確認

ソース1

  <video src="./sample/video.mp4" controls="controls" width="640" height="360">
    <track src="./sample/video-track.vtt" kind="captions" srclang="ja" label="caption" default="default" />
    video要素の代替コンテンツその1
  </video>
  
表示結果1

未対応ブラウザにおいては、代替コンテンツが表示される。

IE6表示のスクリーンショット(表示結果1)
IE6表示:代替コンテンツが表示されている

IE7からIE8も同様。

ソース2:動画ファイルが存在しない場合

  <video src="./sample/nai.mp4" controls="controls" width="640" height="360" title="nai.mp4は存在しません。">
    <track src="./sample/video-track.vtt" kind="captions" srclang="ja" label="caption" default="default" />
    video要素の代替コンテンツその2
  </video>
  
表示結果2

対応してるブラウザにおいては、この場合も代替コンテンツは表示されず、動画が再生されない領域が表示されるだけ。

ソース3:source要素使用

  <video controls="controls" width="640" height="360">
    <source src="./sample/nai.mp4" title="nai.mp4は存在しません。" />
    <source src="./sample/video.mp4" />
    <track src="./sample/video-track.vtt" kind="captions" srclang="ja" label="caption" default="default" />
    video要素の代替コンテンツその3
  </video>
  
表示結果3

最初のソースnai.mp4は存在せず再生できないので、次のソースvideo.mp4が再生されるはず。

ソース4:poster属性使用

  <video src="./sample/nai.mp4" poster="./sample/poster.gif" controls="controls" width="640" height="360" title="nai.mp4は存在しません。">
    <track src="./sample/video-track.vtt" kind="captions" srclang="ja" label="caption" default="default" />
    video要素の代替コンテンツその4
  </video>
  
表示結果4

nai.mp4は存在せず再生できないので、poster属性で指定した画像が表示される。