Opera Developer CommunityにてCristian-Ionut Colceriu氏がBuilding a custom HTML5 video player with CSS3 and jQueryというタイトルでCSS3/jQueryでオリジナルのHTML5 videoプレーヤを作成する方法を紹介している。

<video>要素はすでに多くのモダンなWebブラウザがサポート済み。まだプレビュー版ではあるが、Internet Explorerでもバージョン9にてサポートされている。動画をネイティブに埋め込むことでさまざまなメリットが生じることもあり、多くのデベロッパができるだけ早くこれらの機能を試用したいと考えている。

しかしながら試用するにあたり、いくつかの障壁もある。Building a custom HTML5 video player with CSS3 and jQueryでは2点の障壁を挙げている。

1. 各Webブラウザでサポートする動画のコーデックが異なる
2. HTML5 <video>を使用したビデオコントローラの実装

各Webブラウザでサポートする動画のコーデックが異なる

主要なWebブラウザ間において、それぞれサポートする動画のコーデックが異なる点。IE9とSafariではH.264をサポートしているが、FirefoxとOperaではTheoraをサポートしている。だがこれはGoogleがVP8コーデックをリリース、WebMプロジェクトが発足し、主要なWebブラウザやFlashがVP8サポートの計画を立てていることから、そこまで長い間問題になることはないだろうとしている。Webブラウザ別の各種コーデック対応状況については「【レポート】HTML5ビデオ、ブラウザと対応サービスまとめ」にて詳しくまとめられているので、こちらもあわせて参照されたい。

HTML5 <video>を使用したビデオコントローラの実装

もうひとつの障壁は、HTML5 <video>要素のプレーヤをカスタマイズして実装する場合。いまのところ、この点はFlashが大きなアドバンテージをもっている。高機能なFlash IDEではボタンやボリューム調節、シークといった各種プレーヤコンポーネントを簡単に作成・カスタマイズすることが可能。これに比べるとHTML5 <video>では、HTML5/CSS3/JavaScriptを駆使してこれらのUIを設計・実装しなければならない。

そこで同氏は、デベロッパが簡単にHTML5 <video>プレーヤをカスタマイズできるツールをjQueryのプラグイン「jquery.ghindaVideoPlayer.js」として開発した。デベロッパはこのプラグインを利用することで、CSS3を編集するだけで簡単にプレーヤをカスタマイズすることが可能となる。テーマ機能もサポートしており、簡単に使い分けが可能だ。この記事では<video>プレーヤのコントローラ設計からテーマ紐付けまで、5つの章にわけて紹介している。

1. コントローラUIの設計 (Video controls)
2. コントローラのマークアップ (Basic markup for controls)
3. 作成したプレーヤをjQueryプラグインとしてパッケージ (Packaging the player as a jQuery plugin)
4. 見た目の調節 (Look and Feel)
5. テーマ紐付け (Themeing the player)

実際にこのプラグインを利用した場合のプレーヤがデモ用にGhinda video player with html5, css3 and javascriptとして公開されている。<video>に対応しているWebブラウザを使用している方は、どんな操作感/見た目になっているかを試せるのでチェックしてほしい。

本稿ではこの章立てをもとに、jquery.ghindaVideoPlayer.jsの使い方と実装を紹介しよう。