May 14th,2016
要素について
| カテゴリー | フロー・コンテンツ、フレージング・コンテンツ、エンベディッド・コンテンツ、パルパブル・コンテンツ |
| “controls”属性を持つ場合、インタラクティブ・コンテンツ | |
| 利用場所 | エンベディッド・コンテンツが置ける場所 |
| 内容 | 本文参照 |
| タグの省略 | 不可 |
“video”要素は文書に映像コンテンツを埋め込む要素です。
HTML5で新しく追加された要素で、今までは動画ファイルを文書に埋め込むにはFlashなどのプラグインが必要でしたが、対応しているブラウザではプラグインなしで埋め込まれた映像コンテンツを再生することができるようになりました。
動画ファイルは“src”属性を使用して直接指定するか“source”要素を使用して指定します。
“controls”属性を指定すると音声ファイルの再生や停止、音量などをユーザーがコントロールできるインタフェースを表示します。表示されるインタフェースのデザインはブラウザによって異なります。
サンプルコード
<p><video src="sample.mp4" poster="sample-poster.png" controls style=" max-width: 100%;">動画ファイルを再生できません</video></p>
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| なし | |||
| 任意属性 | |||
| グローバル属性 | |||
| src="" | 埋め込む動画ファイルの指定 | URL | 埋め込む動画ファイルのURL |
| crossorigin="" | 音声ファイルを読み込む時のCORSリクエストを設定 | anonymous | CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない |
| use-credentials | CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する | ||
| poster="" | 動画ファイルを読み込むまで表示する画像の指定 | URL | 動画ファイルを読み込むまで表示する画像ファイルのURL |
| preload="" | データの事前読み込みを指定 | none | 事前読み込みしない(データを再生する時まで読み込まない) |
| metadata | ページを読み込む時にメタデータのみ読み込む | ||
| auto | ページを読み込む時にデータの読み込みを開始しても良い | ||
| autoplay="" | 自動的に再生する | autoplay | 自動的に再生する |
playsinline="" |
インラインで再生する | playsinline | インラインで再生する |
| loop="" | 再生が終わったらまた最初から再生する | loop | 再生が終わったらまた最初から再生する |
| muted="" | ミュートした状態を初期状態とする | muted | ミュートした状態を初期状態とする |
| controls="" | 再生をコントロールするインタフェースを表示 | controls | 再生をコントロールするインタフェースを表示 |
| width="" | 映像の表示領域の横幅 | 正の整数 | 映像の表示領域の横幅のピクセル数 |
| height="" | 映像の表示領域の高さ | 正の整数 | 映像の表示領域の高さのピクセル数 |
“autoplay”属性を指定した場合“preload”属性は無視されます。
過去に定義されていた属性
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| mediagroup="" | メディアのグループ化 | メディアグループ名 | メディアグループ名 |
要素の内容
“video”要素で埋め込む映像コンテンツを指定する方法は“src”属性で“video”要素に直接指定する方法と“video”要素の子要素となる“source”要素で指定する方法の2通りがあります。“video”要素内に含まれる“source”要素と“track”要素以外の内容はブラウザが“video”要素に対応していない場合に表示されます。
“src”属性を指定する場合
“video”要素の内容は
- 0個以上の“track”要素
- トランスペアレント・コンテンツ・モデル(ただし“video”要素、“audio”要素を内容に含むことはできません)
の順に記述。
“src”属性を指定しない場合
“video”要素の内容は
- 0個以上の“source”要素
- 0個以上の“track”要素
- トランスペアレント・コンテンツ・モデル(ただし“video”要素、“audio”要素を内容に含むことはできません)
の順に記述。
“source”要素を使用して動画ファイルを指定する
“source”要素を使用して動画ファイルを指定する場合、複数の“source”要素を配置することで複数の再生候補を指定することができます。この場合ブラウザがもっとも適切な動画ファイルを選択して再生します。
ブラウザによって再生できる動画ファイルの形式が異なるので、異なる形式の動画ファイルを指定しておくことでそのブラウザが対応している形式のファイルが再生されるようにすることができます。
<p>
<video controls style=" max-width: 100%;">
<source src="sample.mp4" type="video/mp4">
<source src="sample.webm" type="video/webm">
<source src="sample.ogv" type="video/ogg">
動画ファイルを再生できません
</video>
</p>
仕様書
“video”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
定義されている仕様書
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
| <video> |   |
  |
|
|
|
DOMインターフェース
[Exposed=Window]
interface HTMLVideoElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute unsigned long width;
[CEReactions] attribute unsigned long height;
readonly attribute unsigned long videoWidth;
readonly attribute unsigned long videoHeight;
[CEReactions] attribute USVString poster;
[CEReactions] attribute boolean playsInline;
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
video {
object-fit: contain;
}
