video要素の使い方

HTMLのvideo要素を使うと、動画をページの中で再生できます。視聴者が自分で再生・停止できる操作部品を表示し、動画の音声や映像に必要な字幕・説明も用意しましょう。

先に結論

最小例

<video controls width="640" height="360" poster="/media/lesson-poster.jpg">
  <source src="/media/lesson.webm" type="video/webm">
  <source src="/media/lesson.mp4" type="video/mp4">
  <track kind="captions" src="/media/lesson.ja.vtt"
         srclang="ja" label="日本語の字幕" default>
  このブラウザーではvideo要素を再生できません。
</video>
<p>再生できない場合は<a href="/media/lesson.mp4">動画ファイルを開く</a>。</p>

この例のURLはサンプルです。実際のページでは、動画ファイルと字幕ファイルを公開場所に用意します。再生に失敗した人向けのリンクは、古いブラウザー向けの本文とは別に置いています。

動画ファイルを選べるようにする

動画のURLは、videoのsrc属性に1つ指定するか、子要素のsourceに候補を並べます。候補を並べる場合は、ブラウザーが対応状況を判断できるようtypeも書くと、対応していない形式を読み込まずに次の候補へ進める場合があります。

対応する動画形式や映像・音声のcodecは、ブラウザーや端末によって異なります。複数の候補を用意しても、どの環境でも再生できるとは限りません。配信するファイルを複数のブラウザーと端末で確認してください。

videoの中に書いた文章は、主にvideo要素を扱えない古いブラウザー向けです。動画ファイルが読み込めないときにも文章が必ず表示されるわけではないため、必要なら動画への直接リンクや文字の説明も別に用意します。

controlsで操作部品を付ける

controlsを付けると、ブラウザーが再生・一時停止、音量、再生位置などの操作部品を表示します。表示や操作の細部はブラウザーや端末によって変わります。

controlsを付けずに独自の操作部品を作る場合は、キーボードで操作できること、名前や状態が支援技術に伝わること、フォーカス位置が分かることを確認します。見た目のボタンだけでは、操作できるとは限りません。

posterと大きさを指定する

posterは、動画データがまだ表示されていないときに見せる代表画像のURLです。動画の内容を想像しやすくする画像であり、字幕や動画内容の説明文の代わりにはなりません。

widthとheightには、動画のおおよその縦横比に合う値を指定します。動画データが読み込まれる前に表示領域を確保しやすくなり、読み込み時のページのずれを減らせます。CSSで表示サイズを変える場合も、動画の縦横比を保ちます。

字幕と映像の説明を用意する

trackは、字幕や音声解説など、動画の時間に合わせて使うテキストを追加する要素です。kind="captions"は、会話だけでなく、内容を理解するために必要な音も文字で伝える字幕に使います。kind="subtitles"は、たとえば別の言語で会話を読めるようにする字幕に使います。

字幕ファイルには、時間とテキストを記録するWebVTTなどの形式を使います。字幕の言語にはsrclang、利用者に表示する名前にはlabelを指定します。字幕が動画に焼き込まれているだけでは、字幕の表示切替や検索ができない場合があります。

captionsとsubtitlesなど字幕の種類や、属性の詳しい条件はtrack要素の説明で確認できます。

映像にだけ重要な情報がある場合は、音声解説や、音声・映像の内容を順番に説明するテキストも検討します。どの代替が必要かは、動画の内容、録画・ライブの別、適用するアクセシビリティ基準によって変わります。

自動再生は前提にしない

autoplayは、ページを開いたら動画を始めたいという指定です。ただし、ブラウザーは利用者の設定や再生条件に応じて自動再生を止めることがあります。JavaScriptのvideo.play()も、再生が許可されなければ失敗します。

自動再生を前提にせず、利用者が再生を始められる操作部品を用意しましょう。preloadも読み込み方についてのヒントであり、動画全体を必ず先読みする指定ではありません。

よくある間違い

• controlsも操作できる独自UIもなく、動画を再生できない状態にする。
• 自動再生やミュートが、すべてのブラウザーで同じように動くと思い込む。
• ポスター画像を指定すれば、字幕や動画内容の説明も済んだと考える。
• 字幕には会話だけを書き、内容を理解するのに必要な音を伝えない。
• video内の代替テキストだけで、読み込み失敗時にも利用できると考える。

Atlasで詳しく確認する

videoのcontent model、source選択、共有media状態、play()のPromise、HTML-AAM、実装Evidenceの範囲は、Yugien Atlasのvideo要素ページで確認できます。親要素ごとのsource候補と属性条件はsource要素の使い方とAtlasのsource要素、trackの属性条件、WebVTT、未実施EvidenceはAtlasのtrack要素ページも参照してください。音声を再生するaudio要素、画像の埋め込みはimg要素、画面や形式に応じた画像候補の切り替えはpicture要素を参照してください。