video要素

video要素は字幕付きビデオやムービー、オーディオファイルを再生するために使用されます。

video要素のコンテンツは、video要素をサポートしていない古いウェブ・ブラウザに向けて、古いビデオ用プラグインを試すことができるようにしたり、古いブラウザを使っているユーザに、ビデオ・コンテンツにアクセスする方法を知らせるためのテキストをコンテンツとすることができます。ただし、このコンテンツは、アクセシビリティの問題を解決するものではありません。


src属性

src属性は、表示するメディアリソース(ビデオ、オーディオ)のアドレスを指定します。


width属性、height属性

width属性はリソースの幅、height属性は高さを指定します。値は負以外の整数(ピクセル)ですが、単位の(px)はつけません。


例)

<video src="sample.mp4" width="320" height="180" controls><a href="http://example.com/sample.mp4">動画へのリンクです。</a></video>

poster属性

poster属性は、ビデオ・データが利用できない場合に、ユーザー・エージェントが表示する画像ファイルのアドレスを指定します。なお、poster属性で指定する画像ファイルは、ユーザーがどのような映像なのか想像できるような、ビデオの代表的なフレームを使うことが推奨されています。


preload属性

preload属性は、メディア・リソースのバッファリングのときの、以下のキーワードに対応する内容をユーザー・エージェントに伝えます。この属性が指定が無い場合のデフォルトはユーザー・エージェントの定義となります。

また、preload属性よりもautoplay属性が優先されますが、両方の指定があってもエラーにはなりません。


キーワード


mediagroup属性

mediagroup属性は、暗黙的にMediaControllerを作成することによって、複数のvideo要素やaudio要素をリンクします。値はテキストで、同じ値を持つvideo要素やaudio要素はユーザー・エージェントによって自動的にリンクされます。


autoplay属性

autoplay属性は、属性が存在するときに、ユーザー・エージェントに、停止することなく、できるだけ早く自動的にメディア・リソースの再生を開始するように伝えるブーリアン属性です。


loop属性

loop属性は、属性が存在するときに、メディア・リソースの最後に到達すると先頭に戻ってシーク、いわゆるエンドレス再生を指定する、ブーリアン属性です。


muted属性

muted属性は、属性が存在するときに、潜在的にユーザー設定を上書きし、オーディオ出力のデフォルトの状態を制御し、音声を出さない、いわゆるミュート状態で再生する、ブーリアン属性です。


controls属性

controls属性は、属性が存在するときに、ユーザー・エージェントに独自の再生ボタンや停止ボタンなどのコントローラーを提供するように伝える、ブーリアン属性です。


例)自動再生をしますが、音はなしで再生し、ユーザーが音声をオンにできるように指定しています。

<video src="sample.mp4" controls autoplay loop muted></video>

video要素でサポートされているメディアフォーマットについて。

video要素は、プラグインを必要としないビデオの再生サポートを提供します。

しかしながら、主に特許の問題によりブラウザのvideo要素の実装において、それぞれのブラウザで同一のメディア形式をサポートするのは難しい状況のようです。

そのため、主要なブラウザの最新バージョンでvideo要素を使うには、以下の例のように、異なる形式のビデオを用意し、source要素で指定します。例では、WebM形式と、MP4形式のふたつのビデオファイルを指定しています。

例)

<video controls>
<source src="sample.webm" type="video/webm">
<source src="sample.mp4" type="video/mp4">
<a href="http://example.com/sample.mp4">動画へのリンクです。</a>
</video>

参考、詳細:Mozilla Developer Network HTML5のaudio要素とvideo要素でサポートされているメディアフォーマット

カテゴリ
フロー・コンテンツフレージング・コンテンツエンベッディッド・コンテンツインタラクティブ・コンテンツcontrols属性を持つ場合)、パルパブル・コンテンツ
要素を使用することができる場所
エンベッディッド・コンテンツ
コンテンツ モデル(内容に含めることのできる要素)
src属性がある場合は、0個以上の track要素に続き、以降トランスペアレント。ただし、子孫にメディア要素(video要素やaudio要素)が存在しないこと。
src属性がない場合は、0個以上の source要素に続き、0個以上のtrack要素、以降トランスペアレント。ただし、子孫にメディア要素(video要素やaudio要素)が存在しないこと。
コンテンツ属性
グローバル属性src属性crossorigin要素poster属性preload属性autoplay属性mediagroup属性loop属性muted属性controls属性width属性、height属性