コーデック問題
HTMLのマークアップでビデオやオーディオを再生できるのは便利なのですが、大きな問題があります。それはビデオやオーディオのコーデックです。
ひとえにビデオ・ファイルやオーディオ・ファイルといっても、さまざまな種類が存在します。ビデオやオーディオのエンコード方式をコーデックと呼びます。また、エンコードされたデータをどのようにファイルとして格納するのかを決めるコンテナーも重要です。コーデックとコンテナーのいずれもブラウザがサポートしていないと再生できないのです。
なお、ファイルの拡張子は、主にコンテナの種類やコーデックとコンテナーの組み合わせの総称を指しています。必ずしも、拡張子だけで、該当のビデオやオーディオが再生できると判定することはできないため注意が必要です。
HTML5のビデオやオーディオのコーデックの候補がいくつかありますが、各ブラウザのサポート状況は、下表の通りです。括弧内は、標準的なファイルの拡張子を表しています。また、これは、2010年11月現在で入手可能な最新版（ベータ版を含む）のブラウザにおける結果です。
| Chrome 7 | Firefox 4 | Opera 11 | Safari 5 | IE9 | |
| H.264+AAC（.mp4） | ○ | × | × | ○ | ○ |
| Theora+Vorbis（.ogv） | ○ | ○ | ○ | × | × |
| VP8+Vorbis（.webm） | ○ | ○ | ○ | × | × |
| Chrome 7 | Firefox 4 | Opera 11 | Safari 5 | IE9 | |
| AAC（.aac） | × | × | × | ○ | ○ |
| MP3（.mp3） | ○ | × | × | ○ | ○ |
| Vorbis（.ogg） | ○ | ○ | ○ | × | × |
| WAVE（.wav） | × | ○ | ○ | ○ | × |
ご覧の通り、すべてのブラウザで再生可能なコーデックはひとつもありません。前述のように、video要素のsrc属性にビデオやオーディオのファイルのURLを一つだけ指定していては、いずれかのブラウザでは再生できないことになります。しかしHTML5では、それを解決する仕組みが導入されています。
ビデオ・ファイルを複数指定できるsource要素
HTML5には、新たにsource要素が規定されました。これはvideo要素やaudio要素の中に入れて、ビデオやオーディオのファイルのURLを指定するために使います。video要素やaudio要素のsrc属性の代わりに使います。
<video controls="controls"> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> </video>
source要素には、src属性とtype属性が規定されています。src属性にはビデオやオーディオのファイルのURLを指定します。その代わり、video要素やaudio要素にはsrc属性をセットしない点に注意してください。type属性は、ビデオやオーディオのMIMEタイプを指定します。これは必須ではありませんが、ブラウザが該当のビデオやオーディオを再生できるかどうかを判定する重要なヒントとなるため、入れることをお勧めします。
このマークアップ例では、source要素を使って、mp4形式とwebm形式のビデオ・ファイルのURLがセットされています。ブラウザは、上から順に再生可能なファイルを判定していきます。再生可能なファイルが見つかれば、それを再生対象として採用します。この例では、Chrome、Safari、IE9ならMP4形式が、Firefox、Operaならwebm形式が採用されることになります。
このように、ビデオやオーディオのファイルを最低2種類用意すれば、最新のすべてのブラウザで再生することが可能となります。とはいえ、コンテンツ提供者から見れば、同じビデオを2つの形式で用意するというのは、負担が大きいといえます。
ビデオとオーディオを制御するAPI
前述のようにvideo要素やaudio要素を使うことで、マークアップだけでビデオやオーディオが再生できるようになりましたが、HTML5ではJavaScriptからビデオやオーディオの再生を制御できるAPIが規定されました。本連載ではAPIについては触れませんが、ここではそのメリットを解説します。
HTML5で規定されたAPIは、ビデオやオーディオを操作するために必要なあらゆる機能が規定されました。video要素やaudio要素をサポートしたブラウザであれば、その多くの機能を利用することが可能となります。
ブラウザが用意するvideo要素やaudio要素のユーザーインタフェースは、必要最小限の機能に限定されています。また、ブラウザによってデザインも異なります。APIを使うことで、どのブラウザでも同じデザインで、かつ機能多彩なプレーヤーを独自に作ることができるのです。すでにこのAPIを使ったオリジナルのプレーヤーを実現する数多くのJavaScriptライブラリが世界中で公開されています。ここでは、そのうちのVideoJSと呼ばれるライブラリを紹介しましょう。
video要素をサポートしたブラウザなら、下図のようなプレーヤーが表示され、ビデオを再生できます。
head要素の中で、スタイルシートとJavaScriptファイルをロードします。そして、VideoJSが用意したメソッドを呼び出しておきます。
<link rel="stylesheet" href="video-js-2.0.1/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8"> <script src="video-js-2.0.1/video.js"></script> <script> VideoJS.setupAllWhenReady(); </script>
VideoJSを利用する場合、video要素をdiv要素の中に入れます。そして、そのdiv要素とvideo要素にはclass属性に所定の値をセットしておきます。
<div class="video-js-box">
<video controls="controls" poster="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" class="video-js">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
</object>
</video>
</div>
上記の通り、ここでは、source要素にmp4形式のビデオしか指定していません。その代わり、その後ろにobject要素を使って、Flashプレーヤーをロードする仕組みになっています。
これによって、mp4形式をサポートしていないFirefoxやOpera、さらには、video要素をサポートしていないInternet Explorer 8でもビデオが再生されます。
このようなプレーヤーを使う最大のメリットは、デザインが統一されるだけでなく、ビデオ・ファイルをひとつ用意するだけで、あらゆるメジャー・ブラウザでビデオが再生できる点なのです。VideoJSの他にも、さまざまなビデオ再生プレーヤーがあるので、自身のウェブページにビデオを組み込みたいときには、こういったJavaScriptライブラリの導入を検討してみるのも良いでしょう。
