超簡単!HTML5のvideo要素を使って動画を配信しよう

以前は、HTMLで動画を配信するにはFlash等のプラグインを利用する必要がありました。しかし、HTML5ではvideo要素を使うことでプラグインなしで動画を配信することができ、スマートフォンやタブレットでも見ることができます。今回はHTML5 video要素の使い方をレポートしたいと思います。

MIMEタイプの設定

HTML5のvideoタグで動画配信する際には、まずサーバー側でMIMEタイプの設定を確認しておきましょう。httpd.confや.htaccessで、mp4, webm, ogvが登録されているかを確認します。Apache2ではmime.typesに記述されている場合もあるようです。登録されていなければ、.htaccessに下記のように記述しましょう。

.htaccess

AddType video/mp4 .mp4
AddType video/webm .webm
AddType video/ogg .ogv

video要素の基本的な使い方

それではvideo要素の基本的な使い方を見てみましょう。src属性で動画ファイルのパス、width属性で動画の横幅、height属性で動画の縦幅を指定します。下記の例では、autoplay属性で自動再生を指定している他、JavaScriptでvideo要素を取得しやすいようにid属性を付加しています。また、video要素の内側でHTML5 videoに対応していない環境用の記述を入れることができます。

video要素のsrc属性による指定では、1つの動画ファイルしか指定することができません。現時点では、HTML5 videoの動画フォーマットは統一されていないため、後述するsource要素による複数の動画ファイルの指定をおすすめします。

HTML

<video src="video/video.mp4" width="640" height="360" id="my-video" autoplay>
HTML5 videoに対応していない環境用の記述
</video>

video要素で使えるその他の属性

video要素で使えるその他の属性も確認しておきましょう。controls属性を付加すると再生/一時停止・ボリューム等を操作するコントローラが表示されるようになります。loop属性を付加すると動画が繰り返し再生されるようになります。

preload属性では動画のプリロードの指定を行います。初期値の"auto"では動画のプリロードを行い、"metadata"を指定した場合は動画のサイズや再生時間等のメタデータのみプリロードされ、"none"を指定した場合は動画のプリロードは行われなくなります。

poster属性では、動画の再生が行われるまでに表示されるサムネイル画像を指定することができます。また、HTML5 videoには対応しているものの、動画ファイルのフォーマットに対応していないため動画を再生できない場合にもposter属性で指定した画像が表示されます。

HTML

<video src="video/video.mp4" width="640" height="360" controls loop preload="metadata" poster="img/poster.png">
</video>

source要素で異なるフォーマットの動画ファイルを用意する

前述したようにvideo要素のsrc属性では、複数の動画ファイルを指定することができません。video要素の内部でsource要素を使用することにより、mp4, webm, ogvといった異なるフォーマットの動画ファイルを指定することができます。複数のsource要素を指定した場合、Webブラウザは上から順番に動画ファイルの再生を試みます。下記の例では、mp4が再生できなかった場合、webmの再生を試みることになります。

HTML

<video width="640" height="360" controls>
<source src="video/video.mp4">
<source src="video/video.webm">
<source src="video/video.ogv">
</video>

source要素のtype属性

source要素は、type属性を指定することにより動画ファイルのフォーマットやコーデックを明示的に指定することができます。動画ファイルの場合、mp4, ogvといったコンテナーのフォーマットに対応していてもコーデックが対応していないと再生できません。特にmp4の場合は、同じH.264コーデックでもレベルやプロファイルの違いによって再生できない場合があります。そのため、type属性ではコーデックまで指定しておいた方がより安心です。

また、type属性でコーデックを指定することにより、同じフォーマットのファイルでもコーデックを変えたファイルを用意することができます。下記の例では、1番目のsource要素でiPadやiPhone4以降で再生できるH.264 レベル3.1 メインプロファイルのmp4を指定し、2番目のsource要素でiPhone3GSでも再生できるH.264 レベル3.0 ベースラインプロファイルのmp4を指定しています。このように記述しておくことで、iPhone4以降で見た場合は1番目のsource要素、iPhone3GSで見た場合は2番目のsource要素のファイルが表示されるようになります。

HTML

<video width="640" height="360" controls>
<source src="video/video.mp4" type='video/mp4; codecs="avc1.4D401F, mp4a.40.2"'>
<source src="video/video_lv3-0_baseline.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video/video.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

各ブラウザにおける動画フォーマットの対応状況一覧

最後に各ブラウザにおける動画フォーマットの対応状況を調査して一覧でまとめてみました。mp4はビデオコーデック:H.264 レベル3.1 メインプロファイル, 音声コーデック:AAC、webmはビデオコーデック:VP8, 音声コーデック:Vorbis、ogvはビデオコーデック:Theora, 音声コーデック:Vorbisです。

検証環境は、Mac OS X 10.8.2、Windows7、iPhone5、iPad3、Nexus7です。いずれも調査時点で最新のブラウザを使用しています。機種やブラウザのバージョンによっては結果が異なる場合もあると思いますので、予めご了承下さい。

各ブラウザにおけるHTML5 videoの動画フォーマット対応状況一覧

環境 mp4 webm ogv
Mac Safari 6 × ×
Mac Chrome 23
Mac Firefox 17 ×
Mac Opera 12 ×
Win IE 9 × ×
Win Chrome 23
Win Firefox 17 ×
Win Opera 12 ×
iPhone Safari × ×
iPhone Chrome 23 × ×
iPad Safari × ×
iPad Chrome 23 × ×
Android Chrome 18 ×
Android Firefox 17
Android Opera 12 × ×
Android 標準ブラウザ × ×