video要素で動画を埋め込み表示するときの記述方法。

YouTubeなど外部の動画配信サイトの埋め込みではなく、自分でサーバーにアップロードしてあるmp4などの動画ファイルをHTMLのvideo要素でサイトに埋め込み表示させるときの記述方法のメモ。

video要素で動画埋め込みの記述

「video」要素を使用して、サイトに動画を埋め込むときの記述方法。

※ videoのMozillaの公式ドキュメント。

1. 基本的な記述

「video」要素でHTMLに動画を埋め込む基本的な記述の方法。

1. 「動画ファイルのパス」を「src」属性の値に記述。
2. 「controls」属性を付与。(属性値は不要。)

※ 「controls」属性を記述しないと、動画にコントローラーツールが表示されないので再生できない。

<video src="movie/foo.mp4" controls></video>

表示領域内での動画の位置の調整はCSSの「object-position」プロパティー、サイズの調整は「object-fit」プロパティーを使用する。

※ object-positionプロパティーのMozillaの公式ドキュメント。

※ object-fitプロパティーのMozillaの公式ドキュメント。

2. クロスブラウザ対応の記述

クロスブラウザ対応のために、ファイル形式が異なる複数の動画を「source」要素で設定する記述の方法。

※ 「source」要素については前の記事を参照。

1. 「video」要素の子要素として「source」要素を記述。
2. 「動画ファイルのパス」を「source」要素の「src」属性の値に記述。(「video」要素には記述しない。)
3. ファイル形式が異なる複数の動画ファイルそれぞれの「source」要素を記述。
4. リソースの「MIMEタイプ」を「source」要素の「type」属性の値に記述。(省略可。)

※ 「type」属性を省略した場合、サーバーからメディア形式を取得して確認される。

※ ブラウザは、記述順で「source」要素の内容を評価し、対応しているファイル形式だった場合にそのソースを使用する。

<video controls>
  <source type="video/webm" src="movie/foo.webm">
  <source type="video/quicktime" src="movie/foo.mov">
  <source type="video/avi" src="movie/foo.avi">
  <source type="video/mp4" src="movie/foo.mp4">
</video>

3. 任意のサムネイル画像を表示させる記述

動画のサムネイル画像として任意の画像を表示させる記述の方法。

1. 「poster」属性を付与。
2. 「使用したい画像ファイルのパス」を「poster」属性の値に記述。

※ 下記の記述で、動画を再生するまで動画の表示エリアに「img/foo.png」が表示される。

※ 一度でも再生させると動画を停止しても再表示されない。(画像を再表示させたい場合は、JavaScriptでvideo要素をloadし直す必要がある。)

<video src="movie/foo.mp4" poster="img/foo.png" controls></video>

4. iOSのSafari対応の記述

「poster」属性を指定していない場合、iOSのブラウザではサムネイル画像に何も表示されないので、「poster」属性を使用せずにサムネイル画像を表示させる記述の方法。

1. 「src」属性に記述した「動画ファイルのパス」に「#t=0.001」を付与する。

※ 「動画ファイルのパス」に「#t=数値,数値」を付与すると、動画の再生範囲「開始位置,終了位置」(秒数)を指定できる。

※ 再生の「開始位置」を指定することで動画はその秒数から再生されるので、そのフレームの画像がサムネイルとして表示される。

※ 現状、最高質な動画の場合でも「120 ~ 240fps」ほどなので、1フレーム目が表示されるように「0.001秒」の位置を指定する。

※ この再生範囲の指定方法について公式ドキュメントに記述が見つけられないので、正式に規定されている仕様なのかは不明。

※ 「width」属性と「height」属性が無いと、iOSでは動画要素のレンダリング時に表示がカクついたので、記述しておいた方が無難。

<video src="movie/foo.mp4#t=0.001" controls width="動画表示領域の横幅" height="動画表示領域の高さ"></video>

5. 動画を自動再生させる記述

埋め込んだ動画を自動再生させる記述の方法。

1. 自動再生のために「autoplay」属性と「muted」属性を付与。
2. ループ再生させるために「loop」属性を付与。
3. サイト内にインライン表示で再生させるために「playsinline」属性を付与。

※ 一部のブラウザでは、消音状態でないと自動再生できない仕様になっているので、必ず「muted」属性を併記する。

※ 「autoplay」属性を記述すると該当の動画ファイルの全データの読み込みが発生するので、DOMのloadイベントの発火がかなり遅延する場合がある。(自動再生は「autoplay」属性よりも、JavaScriptでcanplayイベントを捕捉してplay()メソッドを実行した方が無難。)

<video src="movie/foo.mp4" autoplay="true" muted="true" loop="true" playsinline="true"></video>

6. 汎用的な記述

よく使う記述。

1. 「poster」属性でサムネイル画像を設定。
2. 「controls」属性でコントローラーを表示。
3. 「controlsList」属性でコントローラーのダウンロード項目を非表示。
4. 「loop」属性でループ再生。
5. 「playsinline」属性でインライン再生。
6. 「preload」属性で動画のメタデータ読み込み。

<video src="movie/foo.mp4" poster="img/foo.png" controls controlsList="nodownload" loop="true" playsinline="true" preload="metadata" width="動画表示領域の横幅" height="動画表示領域の高さ"></video>

video要素に記述できる主な属性

「video」要素に属性を付与して記述することで、自動再生、ループ再生、消音などの設定ができる。

※ video要素の属性についてのMozillaの公式ドキュメント。

1. autoplay

「autoplay」属性は、動画の自動再生の設定。

• 動画データの読み込みが完了し、再生可能な状態になった時点で自動的にコンテンツが再生される。
• 値はBoolean型だが、「autoplay=”false”」と記述しても無効にならず、動画は自動再生される。
• 自動再生を無効にしたい場合は「autoplay」属性を記述しない。(属性の値ではなく属性自体の有無で判断される。)
• Chromeなど一部のブラウザでは、「muted」属性で消音が有効になっていないと自動再生は機能しない。

2. controls

「controls」属性は、動画コントローラー表示の設定。

• 動画上に再生ボタンや音量、シークバーなど、ブラウザ準拠のコントローラーツールが表示される。
• 属性値は不要なので、属性名のみ記述する。
• 無効にしたい場合は「controls」属性を記述しない。(属性の値ではなく属性自体の有無で判断される。)

3. controlslist

「controlslist」属性は、動画コントローラーの内容の制御の設定。

• ブラウザ準拠のコントローラーに該当のメニュー項目がある場合は非表示になる。
• 指定できる値は以下のいずれか。
• nodownload : 「ダウンロード」の項目を非表示にする。(通常の右クリックメニューは非表示にできない。)
• nofullscreen : 「フルスクリーンモード」の項目を非表示にする。
• noremoteplayback : 「リモートプレイバック」の項目を非表示にする。

4. crossorigin

「crossorigin」属性は、動画リソース取得のクロスオリジン対応の設定。

• この属性が存在しない場合、リソースはCORS無しのリクエストで取得される。
• この属性の値に指定できるのは「anonymous」か「use-credentials」。(既定値は「anonymous」。)

5. disablePictureInPicture

「disablePictureInPicture」属性は、ピクチャーインピクチャー機能の非表示の設定。

• ブラウザ準拠のコントローラー(または動画上で右クリックメニュー)のピクチャーインピクチャーの項目を非表示にする。
• この属性はChromeとEdgeでのみ有効。(FirefoxとSafariでは非表示にできない。)

6. loop

「loop」属性は、ループ再生の設定。

• 最後まで動画が再生されたら自動的に頭に戻ってループ再生される。
• 値はBoolean型だが、「loop=”false”」と記述しても無効にならず、動画はループ再生される。
• ループ再生を無効にしたい場合は「loop」属性を記述しない。(属性の値ではなく属性自体の有無で判断される。)

7. muted

「muted」属性は、消音の設定。

• 動画に含まれる音声が消音になる。(音声が再生されないだけなので、音量の値を「0」にするわけではない。)
• 値はBoolean型だが、「muted=”false”」と記述しても無効にならず、動画は消音で再生される。
• 消音を無効にしたい場合は「muted」属性を記述しない。(属性の値ではなく属性自体の有無で判断される。)
• 既定値は「false」なので、属性名だけ記述した場合は値が空文字扱いで「false」になる。

※ Mozillaの公式ドキュメントには「既定値は false であり、動画再生時に音声も再生することを表します。」と記述されているが、Boolean値に関わらず「muted」属性が存在すると消音で再生される。(Chrome 106.0.5249.119、Firefox 105.0.3、Safari 14.1.2で動作確認。)

8. playsinline

「playsinline」属性は、インラインで再生させるかの設定。

• 動画をサイト内でインラインのままで再生させる。
• 値はBoolean型だが、「playsinline=”false”」と記述しても無効にならず、インラインで再生される。
• この属性が無い場合、iOSのブラウザでは動画再生専用の背景黒画面のフルスクリーンモードで再生される。
• この属性が無い場合の再生のされ方はブラウザ仕様によって異なる。

9. poster

「poster」属性は、動画のサムネイル画像の設定。

• 動画のサムネイル画像として任意の画像を表示させる。
• 属性の値に「使用したい画像ファイルのパス」を設定する。
• 一度動画を再生させると、再読み込みしない限り「poster」属性の画像は再表示されない。
• この属性が設定されない場合、最初のフレームが利用可能になるまで何も表示されず、その後、最初のフレームが静止画として表示される。

10. preload

「preload」属性は、動画リソース読み込みの設定。

• 指定できる値は以下のいずれか。(仕様書では「metadata」の設定が推奨されている。)
• none : 動画を事前に読み込むべきではないことを示す。
• metadata : 動画のメタデータ(長さなど)を読み込む。
• auto : ユーザーが動画ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードして良いことを示す。
• 空文字列 : 「auto」と同義。
• 仕様の規定では、ブラウザが必ずこの属性の設定に従うとはされていない。
• 「autoplay」属性は「preload」属性より優先される。(動画を再生するためにダウンロードしなければならないので。)

• 動画のファイル形式（拡張子）の種類と違いを解説！シーン別のオススメ形式も紹介
• videoタグで動画サムネイルがSafariで表示されない HTML/CSS
• 動画埋め込みでサムネイル画像表示や再生開始地点を指定する方法