HTML入門 | HTML5マルチメディア | ビデオ(video)要素

ビデオ(video)要素

HTML5以前は、Webページでビデオ(video)を表示するための標準仕様がなかった。そのため、ビデオを挿入するにはFlashのような外部プラグイン(plug-in)に頼る必要があった。
しかしHTML5では、<video>タグを使ってWebページにビデオを挿入する標準化された方法を提供している。

<video>タグをサポートする主要Webブラウザのバージョンは次のとおりである。

要素	ie	chrome	firefox	safari	opera
<video>タグ	9.0	4.0	3.5	4.0	10.5

ビデオ要素の属性

例

<video style="width:576; height:360" controls>
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    この文はユーザーのWebブラウザがvideo要素をサポートしていない場合に表示されます。
</video>

controls属性は、再生、停止、音量調整など、ビデオの基本操作を制御できるパネルを生成する。
また、height属性とwidth属性を使って、Webブラウザに挿入されるビデオのサイズを指定できる。

Webブラウザは、複数の<source>タグのうち上から順に最初に認識できるファイルタイプとアドレスを使用する。
<video>タグの間にあるテキストは、そのWebブラウザが<video>タグをサポートしていない場合だけ画面に表示される。

autoplay属性は、Webページがロード(load)されたときにビデオを自動再生するかどうかを設定する。

例

<video style="width:576; height:360" controls autoplay>
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    この文はユーザーのWebブラウザがvideo要素をサポートしていない場合に表示されます。
</video>

loop属性を設定すると、ビデオの再生が終わっても継続して繰り返し再生される。

例

<video style="width:576; height:360" controls loop>
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    この文はユーザーのWebブラウザがvideo要素をサポートしていない場合に表示されます。
</video>

<track>タグは、ビデオ再生時に表示する字幕やキャプションファイルを指定するために使用する。

例

<video style="width:576; height:360" controls>
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    <track kind="subtitles" src="sample_subtitle_en.vtt" srclang="en" label="English">
    <track kind="subtitles" src="sample_subtitle_fr.vtt" srclang="fr" label="Francais">
    この文はユーザーのWebブラウザがvideo要素をサポートしていない場合に表示されます。
</video>

kind属性は字幕文字列のタイプを指定し、srclang属性はその文字列の言語設定を指定する。
label属性はユーザーが見るラベルを指定する。

HTML5ビデオファイル形式

HTML5標準が公式にサポートするビデオファイル形式は、MP4、WebM、OGVのみである。

MP4: Moving Picture Experts Groupによって開発され、ビデオコーデックにはH.268、オーディオコーデックにはAACを使用する。少ない容量でも高品質な映像と音声を実現できるため、インターネットでのストリーミングによく活用されるファイル形式である。
WebM: Googleの支援で開発されたオープンなマルチメディアファイル形式で、ビデオコーデックにはVP8、オーディオコーデックにはVorbisを使用する。
OGV: Theora Oggとも呼ばれ、Xiph FoundationによってMP3の代替として開発された、特許で保護されていないオープンなマルチメディアファイル形式である。ビデオコーデックにはTheora、オーディオコーデックにはVorbisを使用する。

HTML5ビデオファイル形式ごとの主要Webブラウザのサポート状況は次の表のとおりである。

ファイル形式	メディアタイプ	ie	chrome	firefox	safari	opera
MP4	video/mp4	○	○	○	○	○
WebM	video/webm	Χ	○	○	Χ	○
OGV	video/ogg	Χ	○	○	Χ	○

HTML5 video要素

要素	説明
video	ビデオや映画などのビデオファイルを指定する。
source	video要素の元ファイルに対するファイル形式とファイルアドレスを複数指定する。Webブラウザは上から順に最初に認識できるファイル形式とファイルアドレスを使用する。
track	ビデオプレーヤーに対するテキスト字幕を指定する。

HTML5 video属性

属性	説明
src	ビデオファイルのパスを指定する。
height	ビデオファイルの高さを指定する。
width	ビデオファイルの幅を指定する。
controls	ビデオの基本操作を制御できるパネルを指定する。
autoplay	ビデオを自動再生するかどうかを指定する。
loop	ビデオを繰り返し再生するかどうかを指定する。
poster	ビデオがまだ準備中のときに読み込む画像ファイルのパスを指定する。
preload	ビデオを再生する前にファイル内容をすべて読み込むかどうかを指定する。