古籏一浩のJavaScriptラボ ― 第29回

HTML5 videoで作る“動くストリートビュー”

2010年03月24日 11時00分更新

文● 古籏一浩

※この記事は「古籏一浩のJavaScriptラボ」の第29回です。過去の記事も合わせてご覧ください。


スライダーで視点を変えられる360度動画。画像クリックでサンプルページを表示します（Safari 4、Opera 10.50でのみ表示可能）

動画を手軽に扱えるHTML5

　Webブラウザーで動画を再生するには、従来、Flash Playerなどのプラグインが必要でした。これに対して、現在策定が進められているHTML5では、「video」という新しい要素が追加され、ブラウザーだけで動画を再生できます。

　単なる再生だけであればメリットは薄いと感じるかもしれませんが、HTML5のvideo機能はJavaScriptによって動画を制御できます。Flashの場合、JavaScriptからFlashへ命令を送れないブラウザーもありますし、iPhoneやiPadなど、Flash Playerが存在しない環境もあります。将来的に、iPhoneやiPadなどに搭載されているSafariのWebKitがHTML5 videoに対応すると、動画の制御を伴うようなWebアプリケーションも開発できるようになるでしょう。

　また、HTML5 videoは動画の上に文字や画像を重ねて表示できます。つまり、ブラウザー上でテロップを時間に合わせて表示することもできるのです。従来、映像制作ソフトで文字を入れてレンダリングし、エンコードしていた時間が不要になり、映像と文字を分離できるので、映像に手を加える必要がなくなります。

　今回はHTML5のvideo機能を使って、周囲を360度見渡せるパノラマ動画サイトを作ります。スライダーで視点を変更したり、ボタン操作で動画の早送り／巻き戻し、一時停止したりできます。サンプルは車に搭載したビデオカメラで撮影しましたので、さしずめ、“動くストリートビュー”といったところでしょうか。

HTML5 videoのデメリット

　先にHTML5 videoの利点を書きましたが、よくない部分もあります。もっとも問題なのは、2010年3月現在、ブラウザーによって対応しているコーデック（動画圧縮方式）が異なることです。動画コーデックは非常に多数ありますが、現在HTML5に対応しているブラウザーがサポートしている主なコーデックはH264とTheora (Ogg)です ^(*1)。SafariはH264のみ、FirefoxはTheoraのみ再生できます（Google Chromeは両方に対応）。ということは、現時点では2種類のコーデックによりエンコードされた動画ファイルを用意しなければなりません。これは非常に手間です。

　今回作成するサンプルは、Safari 4、Opera 10.50以降のみで正しく動作します。Google Chrome 4以降、Firefox 3.5以降では動画が半分しか表示されない、などの不具合が発生することがあります。また、Internet Explorer、iPhoneのSafariでは動作しません。

*1　MPEG 4など他の形式も再生することができますが、OSなどの環境に依存することがあります。

前へ 1 2 3 4 次へ

ツイートする