HTML5 VideoまとめとMediaElement.js

HTML5 Videoはそのコーデックまでは規約では規定されていない。現在のところH.264、OGG、WebMという3つのコーデックが有力視されており、ブラウザにおけるサポートもさまざまだ。IE9以前のIEのようにHTML5 Videoをサポートしていないブラウザに対応することも考えると、FlashやSilverlightのサポートも必要になってくる。こうした現状に対応するためいくつかのテクニックとJavaScriptフレームワークとプレーヤが登場している。実現方法はさまざまだが、そのほとんどがHTML5 Videoをサポートしていればそれを使い、そうでなければ最終的にFlashを受け皿に使うといった仕組みを採用している。

そうしたフレームワークのひとつにMediaElement.jsがある。MediaElement.jsの開発者がMediaElement.js - a magic unicorn HTML5 video libraryにおいてHTML5 Videoの対応状況、代表的なテクニック、代表的なフレームワーク、MediaElement.jsにおけるアプローチを紹介しており参考になる。同記事ではまずHTML5 Videoの取り巻く問題を次のように紹介。この対応策としてさらに3つの方法を紹介している。

HTML5 Videoの現状の問題点

ブラウザ	H.264	OGG	WebM
IE9	○		△
IE6-IE8
Firefox		○	○
Safari	○
Chrome	○	○	○
Opera		○	○
Android	○
iOS	○
WP7	○
Flash	○		△
Silverlight	○

複数のコーデックが存在しており、ブラウザの対応状況もバラバラ。HTML5 Videoをサポートしない古いブラウザもあるため、そうしたブラウザに対してはFlashやSilverlightを受け皿として使う必要がある。またHTML5 VideoのUIは規定されておらず、ブラウザごとに違っている。UIを統一するにはJavaScript/CSSを使ったコーディングが必要。

対策1. ネストHTMLテクニック

Video for Everybody!で紹介されているネストHTMLテクニックを使う。次のHTMLのようにvideo要素の内部に複数のコーデックファイルの指定とFlashを受け皿として記載するというもの。なおこのテクニックでは記述の順序にも意味がある。

<video width="640" height="360" controls>
  <source src="target.mp4" type="video/mp4" />
  <source src="target.ogv" type="video/ogg" />
  <object width="640" height="360" type="application/x-shockwave-flash" data="target.swf">
    <param name="movie" value="target.swf" />
    <param name="flashvars" value="controlbar=over&amp;image=target.jpg&amp;file=target.mp4" />
    <img src="target.jpg" width="640" height="360" alt="some title" title="some title" />
  </object>
</video>

• 利点 - JavaScriptを動作させる必要がなく、HTMLのみで対応できる。
• 欠点 - HTMLが複雑。また、MP4とOGGといったように複数のコーデック版を用意する必要がある。

対策2. JavaScriptプレーヤ

JavaScriptを使ってブラウザがHTML5 Videoをサポートしているかどうか検出、サポートしている場合には対象となるコーデックをサポートしているかチェックし、サポートしている場合にはHTML5 Videoを使い、そうでない場合にはFlashを使う。JavaScript Videoプレーヤ一覧としてHTML5 video playerが紹介されている。

• 利点 - コーデックがひとつで済む。H.264/MP4を使えばIE9、Safari、Chrome、WM7、Android、iOSがHTML5 Videoとなり、Firefox、Opera、それ以外の古いブラウザがFlashを使うということになる。
• 欠点 - HTML VideoとFlashでUIが違ってくるほか、再生以外の機能を実装しようとするとHTML5 VideoとFlashの双方に対して開発を実施する必要がある。

対策3. MediaElement.js

基本的にはJavaScriptプレーヤと同じアプローチだが、次の特徴がある。

• FlashのみならずSilverlightへ対応している。
• FlashおよびSilverlightをJavaScriptで囲い込んでいる。こうすることでHTML5 Videoと同じAPIでFlash/Silverlightのビデオも操作できるようにしている。
• HTML5 VideoでもFlash/Silverlightでも同じUIを実現している。Flash/SilverlightをJavaScriptで囲い込むことで実現している。

MediaElement.jsはJavaScriptプレーヤで指摘されている部分を改善した作りになっている。a magic unicorn HTML5 video libraryでは、HTML5 Videoはフルスクリーンをサポートするための一貫した方法が提供されていないとし、その部分の開発は今後の課題としている。