<video> * - ビデオ（新）

■ 概要

項　　目説　　明
記述形式 <video src="ビデオ・ファイル" >～</video>
<video>～</video>　（source要素を含むとき）
対応ブラウザー H5+ / e9+ / Fx3.5+ / Op10.5+ / Ch1+ / Sa3.1+
種　　類
（カテゴリー）		 フロー・コンテンツ，フレージング・コンテンツ ，エンベッディッド・コンテンツ ，
インタラクティブ・コンテンツ（controls属性をもつとき），パルパブル・コンテンツ  
置ける場所 エンベッディッド・コンテンツが記入できる場所
内包要素
（コンテンツ・モデル）		 ① ０個以上の track要素に続きトランスペアレント　（ src属性をもつとき。）
　［ただし，media要素（audio要素と video要素）を子孫に含まないこと］
② ０個以上の source要素，０個以上の track要素に続きトランスペアレント
（src属性をもたないとき。）
　［ただし，media要素（audio要素と video要素）を子孫に含まないこと］
（コンテンツ・モデル: トランスペアレント）

■ 解説

<video> はプラグインを使用せずにビデオ・ファイルを再生するための要素です。

<video>～</video> の間には video要素に未対応のブラウザーに表示するメッセージ（フォールバック・コンテンツ）を記入することができます。

■ 属性

種　　類名　　称
【固有属性】 src，crossorigin *，poster *，preload *，
autoplay *，mediagroup *，controls *，
loop *，muted *，width，height
【グローバル属性】 accesskey，class，contenteditable *， dir，
hidden *，id， lang，spellcheck *，style，
tabindex，title，translate *
【ARIA role属性】 で
指定可能な値 （役割）		 application
【ARIA aria-* 属性】 で
指定可能なもの		 ARIA グローバル状態とプロパティ，
指定可能な役割の任意の状態とプロパティ   

src属性
ビデオ・ファイルの URL を指定します。　対応するブラウザーを考慮して，複数のフォーマットでビデオ・ファイルを指定したい場合は，この属性は指定しないで，複数のsource要素を <video>～</video> 間のフォールバック・コンテンツより前に置きます。

crossorigin属性
CORS（クロスドメイン通信制約）によるサーバーとの通信方法 を指定します。　

poster属性
ビデオ再生を準備する間に表示する画像ファイル（ポスター・フレーム）の URL を指定します。　再生するビデオの内容がわかる画像を使用します。

preload属性
ビデオ・ファイルの再生操作を待たずに，データを事前に自動的にダウンロードしておくかどうかを指定します。　指定できる値は次の通りです。
none　なし
metadata　メタデータのみ
auto　自動
空文字　preload="" と指定した場合は，auto として処理される

autoplay属性
この属性を指定すると，ビデオ・ファイル再生の準備ができ次第，自動的に再生が開始されるようになります。　「autoplay」「auto="autoplay"」「autoplay=""」のいずれかの形式で指定します。

mediagroup属性
メディアを非表示のメディア・コントローラとともにグループ化し，連続再生も可能にします。

loop属性
この属性を指定すると，ビデオ・ファイルがループ（繰り返し）して再生されるようになります。　「loop」「loop="loop"」「loop=""」のいずれかの形式で指定します。

muted属性
ミュート状態を指定します。　「muted」「muted=""」「muted="muted"」のいずれかで指定します。

controls属性
この属性を指定すると，ビデオ・ファイルの再生や停止などの操作のためのコントロールが表示されるようになります。　「controls」「controls="controls"」「controls=""」のいずれかの形式で指定します。　コントロールの形状やコントロールを常に表示するかなどは，ブラウザーによって異なります。

width属性/height属性
ビデオの表示範囲を幅と高さのピクセル単位で指定します。　ビデオ・ファイルの映像の縦横比と同じ比率で指定するようにします。　比率が異なる場合には，何も表示されない領域ができます。　これらの属性が指定されない場合は，ビデオ・ファイルがもつ本来のサイズで表示されます。

■ CSSプロパティ

種　　類名　　称
【よく使うもの】

■ 使用例

HTMLソース
HTML
<body> ～ </body>		 
<video src="video.mpg" autoplay loop>
  <p>このブラウザーは video に未対応です。</p>
</video>

■ 備考

これまで，Web ページ上でのビデオ再生には Adobe Flash や QuickTime などのプラグインが用いられてきました。　video要素とそれに対応したブラウザーの組合せでは，このようなプラグインは不要となり，video要素の記述だけでビデオの再生・視聴が可能になります。　これは便利である一方，ビデオ・ファイルの形式（ビデオ・コーデック）にはさまざまなものがあるにもかかわらず，現在のところ HTML5 では標準のビデオ・コーデックが規定されていません。　また，ブラウザーによってサポートするビデオ・コーデックも異なるのが現状です。　したがって，video要素を使用する場合には，複数のビデオ・ファイルを用意するなどの配慮も必要です。（この場合，上述のとおり， source要素を使用します。）