<video>タグの解説
<video>は、ページ内に動画コンテンツを埋め込み再生できるメディアプレイヤーを提供します。表示されるユーザーインターフェイスは、ブラウザに実装されているものとなります。
動画ファイルはsrc属性で直接URLを指定します。複数のメディアフォーマットから選べるようにするには、子要素に<source>を配置してリソースを追加します。複数の動画形式からブラウザが最適なものを選べる状況にしておくことで、視聴者の機会損失を防ぎます。
動画が再生できない環境を考慮して代替テキストを配置しておくことを推奨します。動画に字幕やキャプションを付け加える場合は、<track>要素を活用して下さい。
<video>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- サポートされているブラウザでは、要素に与えられた幅や高さに応じて動画を再生するメディアプレイヤーが表示されます。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<video>要素に指定できる属性
src- 動画ファイルのURLを指定します。
controls- コンテンツを制御するための再生、一時停止、音量、シーク、ポーズ等の各機能をコントロールするインターフェイスを表示します。
poster- 動画ファイルが利用可能になるまで表示される画像を指定します。この属性が指定されない場合、再生可能な映像データがなかった場合に何も表示されません。
autoplay- この属性が指定された場合、データの読み込みが完了して再生可能な状態になった時点で、自動的に動画の再生が始まります。多くの場合、ユーザーが意図しない状況での自動再生は不快の原因になるため避けましょう。これは値のない論理属性です。
loop- 動画が最後まで再生された後、自動的に先頭位置に戻ります。これは値のない論理属性です。
muted- 動画再生時の初期状態が消音になります。これは値のない論理属性です。
playsinline- 動画コンテンツをインラインで再生します。多くのブラウザは既定値でインライン再生を行いますが、特に指定がない場合にフルスクリーンで再生される環境もあります。これは値のない論理属性です。
preload- 動画ファイルの読み込みに関するブラウザの振る舞いを提案します。
none：動画を事前に読み込むべきではないことを示します。metadata：動画のメタデータを読み込みます。auto：ファイル全体を自動的にダウンロードしてよいことを示します。
crossorigin- 関連画像を取得する際にCORSを使用するかどうかを指定します。CORSとは「Cross Origin Resource Sharing」の略で、別のドメインに置かれたリソースの扱いに関する内容です。この属性が与えられた場合、その画像ファイルを読み込む時にCORSリクエストが送信されます。
width- 動画コンテンツの幅を指定します。単位なし整数のピクセル値を受け入れます。
height- 動画コンテンツの高さを指定します。単位なし整数のピクセル値を受け入れます。
controlslist（非正規）- ブラウザがメディアに対して表示するコントローラーを制御します。対応しているブラウザに限り有効です。
nodownload：ダウンロードを無効にするnofullscreen：全画面表示を無効にするnoremoteplayback：プレイバックを無効にする
autopictureinpicture（非正規）- 対応しているブラウザで、ピクチャインピクチャモードを指定します。ユーザーが動画閲覧中に別のページへ移動した時の振る舞いに影響します。これは値のない論理属性です。
disablepictureinpicture（非正規）- ブラウザ側にピクチャインピクチャのメニューを表示させないようにしたり、自動的にピクチャインピクチャを要求しないようにします。
disableremoteplayback（非正規）- 有線や無線で接続された外部端末のリモート再生機能を無効にする場合に指定します。これは値のない論理属性です。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<video>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。src属性で埋め込むコンテンツのファイルを指定し、controls属性を有効にしてコンテンツを制御するためのインターフェイスを表示させます。
<video src="file" controls></video>
対応しているブラウザであれば、この段階でインターフェイスが表示されます。上記の内容を元に、実際に動画コンテンツを埋め込んでみましょう。表示サイズはwidth属性とheight属性で固定できますが、ここではCSSで指定します。
<div class="sample-block">
<video src="sample/movie.mp4" controls></video>
</div>
.sample-block video {
inline-size: 100%;
block-size: auto;
max-block-size: 300px;
margin-inline: auto;
}
動画のサムネイルを指定する
動画の待機画面に表示されるサムネイルを指定するには、poster属性に画像のURLを追加します。<video>にこの属性を指定しなかった場合、動画の読み込みが終わるまで画面には何も表示されず、利用可能になった時点で動画の最初のフレームが表示されます。
<video src="file" poster="image"></video>
動画を自動再生させる
埋め込んだ動画を自動的に再生させたい場合は、autoplay属性を追加します。この属性は論理属性であるため、値の記述は必要ありません。ブラウザはデータの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツを再生します。
<video src="file" autoplay></video>
動画をループで再生させる
動画が終了した時点でループ再生させたい場合は、loop属性を追加します。この属性は論理属性であるため、値の記述は必要ありません。
<video src="file" loop></video>
動画の音声を初期状態でミュートにする
動画の音声をミュートした状態で再生させたい場合は、muted属性を追加します。これはあくまで初期状態を消音にするものです。controls属性で操作パネルが有効になっていれば、ユーザーは任意のタイミングで音声を調整できます。この属性は論理属性であるため、値の記述は必要ありません。
<video src="file" muted></video>
複数の属性を組み合わせた記述例
<video>にはいくつかの見慣れない属性があるため、初めて使う際に少し戸惑いますが、格機能は馴染のあるものなので、冷静に必要な機能を付け替えていけば問題ありません。
以下の例は、あえてコントロールパネルを提供せずにユーザーが操作できない自動再生、無音、ループ再生の動画を表しています。コンテンツの中でイメージ映像を流したい箇所などに利用できます。
<video src="file" autoplay muted loop></video>
動画が再生できない環境に配慮する
<video>開始タグと終了タグの間に配置されたテキストは、この要素に対応していないブラウザが代替コンテンツとして表示します。何らかの理由で動画が再生できない環境を考慮して、以下のような内容を記述しておきましょう。
<video src="file" controls>
<p>お使いのブラウザではこの動画を再生できません。</p>
</video>
複数の動画フォーマットを提供する
ブラウザが動画ファイルの形式に対応していない環境を想定して、複数のメディアフォーマットを提供することもできます。<video>の子要素に<source>を配置すると、ブラウザは上から順に利用可能な形式を探して、該当した最初のリソースを採用します。
<video controls>
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mov" type="video/quicktime">
<p>お使いのブラウザではこの動画を再生できません。</p>
</video>
動画に字幕やキャプションなどのトラックデータを与える方法は、<track>を参照して下さい。