CodeZine(コードジン)

特集ページ一覧

HTML5で実現できるマルチメディア系機能
ここが違う!サンプルで見るHTML5(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/12/16 14:00

目次

コーデック問題

 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属性の代わりに使います。

source要素のマークアップ例
<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要素をサポートしたブラウザなら、下図のようなプレーヤーが表示され、ビデオを再生できます。

VideoJSのビデオ・プレーヤー
VideoJSのビデオ・プレーヤー

 head要素の中で、スタイルシートとJavaScriptファイルをロードします。そして、VideoJSが用意したメソッドを呼び出しておきます。

スタイルシートとスクリプトのロード(head要素の中)
<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でもビデオが再生されます。

Internet Explorer 8の場合
Internet Explorer 8の場合

 このようなプレーヤーを使う最大のメリットは、デザインが統一されるだけでなく、ビデオ・ファイルをひとつ用意するだけで、あらゆるメジャー・ブラウザでビデオが再生できる点なのです。VideoJSの他にも、さまざまなビデオ再生プレーヤーがあるので、自身のウェブページにビデオを組み込みたいときには、こういったJavaScriptライブラリの導入を検討してみるのも良いでしょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ここが違う!サンプルで見るHTML5

著者プロフィール

  • 羽田野 太巳(ハタノ フトミ)

    有限会社futomi 代表取締役 1971年岐阜県生まれ。 ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。 オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。 20...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5