目次に戻る

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→閲覧者のニーズを優先してメディアリソースを事前に読み込んでおいてもよい旨を、ユーザーエージェントに示唆する。
  • width→px単位の幅を指定する非負整数。単位はつけない。デフォルトは、300
  • height→px単位の高さを指定する非負整数。単位はつけない。デフォルトは、150
  • itemprop属性がある場合は、src属性は必須。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、なし。
  • デフォルトrole以外では、applicationを指定可。
視覚系ブラウザのデフォルトとして期待されるCSS

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

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

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

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

アクセシビリティ関連

私見・補足

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

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

表示確認

ソース１

  <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要素の代替コンテンツその１
  </video>
表示結果１
ソース２：動画ファイルが存在しない場合

  <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要素の代替コンテンツその２
  </video>
表示結果２

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

ソース３：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要素の代替コンテンツその３
  </video>
表示結果３

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

ソース４：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要素の代替コンテンツその４
  </video>
表示結果４

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