<video> ページ内に動画コンテンツを表示する
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ フレージング・コンテンツ エンベッデッド・コンテンツ controls 属性を持つ場合、インタラクティブ・コンテンツ、パルパブル・コンテンツ |
親にできる要素 | エンベッテッド・コンテンツを受け入れる要素 |
子にできる要素 |
0個以上の<source> 、<track> 、メディア要素を含まないトランスパレント・コンテンツ。src 属性を持つ場合、<source> は除く
|
対応ブラウザ | caniuseで確認 |
<video>タグの説明
<video>
は、ページ内に動画コンテンツを再生するためのメディアプレイヤーを埋め込みます。動画ファイルは、src
属性でURLを指定します。動画再生やファイルのフォーマットに対応していない環境を考慮して、代替テキストを配置しておくことも可能です。
動画を複数のフォーマットから選べるようにするには。<source>
を使って複数のURLを指定します。複数のファイルからブラウザが最適なものを選べる状況にしておくことで、視聴者の機会損失を防ぎます。
動画に字幕やキャプションなどのトラックデータを与える方法は、<track>
を参照して下さい。
<video>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- サポートされているブラウザでは、要素に与えられた幅や高さに応じて動画を再生するメディアプレイヤーが表示されます。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<video>に指定できる主な属性
- src
- 動画ファイルのURLを指定します。
- width
- 動画コンテンツの幅を指定します。単位なしの表記でpx値の認識になります。
- height
- 動画コンテンツの高さを指定します。単位なしの表記でpx値の認識になります。
- poster
- 動画ファイルが利用可能になるまで表示される画像を指定します。この属性が指定されない場合、再生可能な映像データがなかった場合に何も表示されません。
- controls
- コンテンツを制御するための再生、一時停止、音量、シーク、ポーズ等の各機能をコントロールするインターフェイスを表示します。
- controlslist
- ブラウザがメディアに対して表示するコントローラーを制御します。対応しているブラウザに限り有効です。
nodownload
:ダウンロードを無効にするnofullscreen
:全画面表示を無効にするnoremoteplayback
:プレイバックを無効にする
- autoplay
- この属性が指定された場合、データの読み込みが完了して再生可能な状態になった時点で、自動的に動画の再生が始まります。多くの場合、ユーザーが意図しない状況での自動再生は不快の原因になるため避けましょう。これは論理属性です。
- loop
- 動画が最後まで再生された後、自動的に先頭位置に戻ります。これは論理属性です。
- muted
- 動画再生時の初期状態が消音になります。これは論理属性です。
- playsinline
- 動画のサイズに関わらず、要素のインラインで表示します。これは論理属性です。
- preload
- 動画ファイルの読み込みに関するブラウザの振る舞いを提案します。
none
:動画を事前に読み込むべきではないことを示します。metadata
:動画のメタデータを読み込みます。auto
:ファイル全体を自動的にダウンロードしてよいことを示します。
- autopictureinpicture
- 対応しているブラウザで、ピクチャインピクチャモードを指定します。ユーザーが動画閲覧中に別のページへ移動した時の振る舞いに影響します。これは論理属性です。
- disablepictureinpicture
- ブラウザ側にピクチャインピクチャのメニューを表示させないようにしたり、自動的にピクチャインピクチャを要求しないようにします。
- disableremoteplayback
- 有線や無線で接続された外部端末のリモート再生機能を無効にする場合に指定します。これは論理属性です。
- crossorigin
- 関連画像を取得する際にCORSを使用するかどうかを指定します。CORSとは「Cross Origin Resource Sharing」の略で、別のドメインに置かれたリソースの扱いに関する内容です。この属性が与えられた場合、その画像ファイルを読み込む時にCORSリクエストが送信されます。
<video>の使い方とサンプル
このタグを使ったマークアップのサンプルです。ブラウザは全ての動画形式に対応しているわけではないので、複数のメディアフォーマットを用意しておきましょう。ブラウザは、設置された<source>
の中から再生可能な最初のファイルを選択します。
HTML
<video controls>
<source src="foo.webm" type="video/webm">
<source src="foo.mp4" type="video/mp4">
<source src="foo.ogg" type="video/ogg">
<source src="foo.mov" type="video/quicktime">
<div>お使いのブラウザは動画の再生に対応していません。</div>
</video>
動画に字幕やキャプションなどのトラックデータを与える方法は、<track>
を参照して下さい。
<video>に関連するHTMLタグ
オブジェクトやスクリプトを埋め込む要素 | |
---|---|
<img> | 画像を表示する |
<picture> | 特定の画像に対して複数のメディアソースを提供するコンテナを設置する |
<figure> | 写真や図表などの自己完結した要素を表す |
<figcaption> | 参照される写真や図表にキャプションを追加する |
<canvas> | スクリプトで定義したグラフィックスを描画するための領域を配置する |
<audio> | ドキュメント内に音声コンテンツを埋め込む |
<video> | ページ内に動画コンテンツを表示する |
<source> | 再生候補となる動画や音源などのメディアソースを指定する |
<track> | 動画や音声ファイルに字幕やキャプションを追加する |
<embed> | 外部コンテンツを埋め込む |
<object> | 外部リソースのオブジェクトを埋め込む |
<param> | パラメーターを指定する |
<script> | HTMLで実行可能なスクリプトを埋め込む |
<noscript> | スクリプトが動作しない環境での表示内容を指定する |
<meter> | 規定範囲内の数量や測定値を表す |
<progress> | 作業の進捗状況を示すプログレスバーを表示する |
<output> | 計算結果やユーザーアクションの出力欄を作成する |
<dialog> | 任意のタイミングで開くダイアログボックスを作成する |
<template> | ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する |
<slot> | ウェブコンポーネントで独自に扱える枠を提供する |