video/audio要素 HTML5で動画や音声を利用しよう！：HTML5“とか”アプリ開発入門（10）（2/2 ページ）

HTML5では＜video＞や＜audio＞といったタグを用いてマークアップを行うだけで、簡単に動画や音声の再生ができるようになる

[白石俊平，株式会社オープンウェブ・テクノロジー] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

ビデオコーデックの対応状況

　さて、video/audio要素はIE、Safari、Chrome、Firefox、Operaといったメジャーなブラウザの、最新バージョン全てでサポートされています。しかし再生できる動画形式はブラウザごとに異なっており、注意が必要です。

　サポートされている形式の差異は、特にvideo要素の場合大きな問題となります。なぜなら現時点では、全てのブラウザによって共通でサポートされている動画形式がないため、少なくとも2つ以上の動画形式にエンコードする必要が生じているからです。

　動画ファイルの構造は、圧縮された動画・音声のデータと、それを包む「コンテナ」に分けて考えることができます。一般的には、動画や音声の圧縮形式のことを「コーデック」、コンテナの形式のことを「フォーマット」と呼び分けます。本来、ブラウザによる動画形式の対応状況はフォーマットとコーデックを分けて論じるべきですが、ここでは紙面の都合上、それらをいっぺんに論じることにします。

　現在、メジャーブラウザがサポートする動画フォーマット／コーデックには、大きく分けて以下の3つがあります。

H.264……高品質な動画コーデック。本来有償ですが、インターネット上の無料配信に限り無料です。MPEG-4フォーマットとともに利用されます。
Ogg……オープンソースで無料のフォーマット。拡張子は「.ogg」や「.ogv」など。動画コーデックはTheora、音声コーデックはVorbisが利用されるのが一般的です。
WebM……Googleが2010年に発表した、オープンソースで無料、高品質なフォーマット。拡張子は「.webm」です。VP8という動画コーデックとともに利用されます。

　上記の動画フォーマット／コーデックが、各ブラウザによってどのようにサポートされているかを示すのが以下の表です。


ブラウザ	H.264	WebM	Ogg
IE9	◯	-	-
Firefox4	-	◯	◯
Chrome10	-	◯	◯
Safari5	◯	-	-
Opera11	-	◯	◯

　オープンソースのフォーマット（WebM、Ogg）をサポートするかどうかで見事に分かれています（Googleは今年1月、H.264のサポートを打ち切ると発表することで、オープンフォーマットのみをサポートするブラウザとなりました）。

　また、GoogleはIE9向けに、WebMを再生可能にするプラグインを提供しています。WebMプラグインはSafari向けにも提供される予定であり、こうしたプラグインを前提にすることで、WebMのみに絞って動画を提供するという選択肢も考えられます。

source要素の利用法

　1つの動画が複数の形式で配信されている状態で、力を発揮するのがsource要素です。

　source要素は、video/audio要素の内側で使用し、複数の形式のメディアファイルを同時に指定できます。ブラウザはsource要素を上から順に走査し、自身が再生できるフォーマットの動画を見付けると、それをダウンロードして再生します。つまり、「どの形式の動画を利用するか」をブラウザが自動的に判定してくれるわけです。

　source要素は以下の属性を持ちます。

src……メディアファイルのURL
type……メディアファイルのMIMEタイプ
media……このメディアファイルが利用される条件を、メディアクエリで指定する。省略時は“all”（あらゆる場合に利用される）

　ブラウザが、自身が再生できるメディアファイルを見付ける手掛かりとするのが、type属性です。type属性にはMIMEタイプを指定します。その際、通常のMIMEタイプ指定だけでは、動画の「フォーマットが何か」を表現することしかできません（例えば「video/mp4」だと、MPEG-4フォーマットであることしか分かりません）。動画のコーデックも併せて指定するには、MIMEタイプの後ろにcodecsパラメータを指定する必要があります。codecsパラメータについては、以下の利用例をご覧ください。

コンテナ：MPEG-4コンテナ、動画コーデック：H.264ハイプロファイル、音声コーデック：AAC-LC
＜source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'＞
コンテナ：Ogg、動画コーデック：Theora、音声コーデック：Vorbis
＜source src='video.mp4' type='video/ogg; codecs="theora,vorbis"'＞
コンテナ：WebM、動画コーデック：VP8、音声コーデック：Vorbis
＜source src='video.mp4' type='video/webm; codecs="vp8,vorbis"'＞

　こうした知識を基に、source要素を利用して、複数の動画ファイルを指定する例を示します。以下のサンプルは、WebMとH.264の動画をsource要素で指定しているため、IE9、Safari5、Chrome10、Opera11、Firefox4の全てのブラウザで動画を視聴できます。動画ファイルは、マイクロソフトの「IE10 Test Drive」でホスティングされているものを使用しました（動画自体は、「Big Buck Bunny」のサイトにてクリエイティブ・コモンズ3.0に基づき配布されているものです）。

<!DOCTYPE html>
<video width="300" height="150" controls>
<!-- WebM対応ブラウザ用 -->
<source type='video/webm' src="http://ie.microsoft.com/testdrive/Graphics/VideoFormatSupport/big_buck_bunny_trailer_480p.webm">
<!-- H.264対応ブラウザ用 -->
<source type='video/mp4; codecs="avc1.64001E, mp4a.40.2"' src="http://ie.microsoft.com/testdrive/Graphics/VideoFormatSupport/big_buck_bunny_trailer_480p_high.mp4">
</video>