HTML5を試してみよう！　「徹底解説 HTML 5ガイドブック」シリーズ

ＨＴＭＬ5のマークアップとＡＰＩを解説した３冊セットがそろいました！
今週は、HMTL 5で注目されている新しいタグ「video」を実際に試してみます。

マークアップの話題になるので、「徹底解説 HTML 5ガイドブック」シリーズのうち参照するのはこちら。
　↓　↓　↓　↓　↓　↓　↓

徹底解説HTML5 マークアップガイドブック

Amazonで購入
セブンネットショッピングで購入
楽天で購入

HTML5では動画のコントロールがマークアップでできると聞き期待していましたので、さっそく試してみました。

まず、ＩＥではIE9でvideoタグがはじめてサポートされましたが、IE8以前では利用できません（実に残念･･･）。現時点では、videoタグ用のプラグインなどが別途必要です。
Firefox、Chrome、Safariでは、すでにサポートされていますが、注意点として利用できる動画のコーデックが異なります。
本書、307ページの表によると

映像	音声	コンテナ	Firefox 3.6	Safari 4	Chrome 4
H.264	AAC	MP4	×	○	○
H.264	MP3	MP4	×	○	○
MPEG-4	AAC	MP4	×	○	×
Theora	Vorbis	Ogg	○	×	○

これに加え、IE9ではH.264＋ACCでコーデックされたMP4ビデオが利用可能です。

ということで、映像コーデックとしては、FirefoxはTheoraのみに、SafariはH.264とMPEG-4に、ChromeはTheoraとH.264に対応しています。

ブラウザによって採用しているコーデックがそれぞれ違うので、クロスブラウザには苦労しそうです。
実際に試してみましょう。ここではH.264、MPEG-4、Theoraそれぞれでエンコードした動画をvideoタグでそれぞれ埋め込んでみました。
ちなみに、前述のとおりIEはIE9以外では見られません。Firefox、Chrome、Safariなどのブラウザで見比べてみてください。

いかがでしょうか。ちなみにＯｐｅｒａではTheoraでエンコードしたものだけが再生できました。
しかし、ビデオ形式ごとに別々に表示するのは現実的ではないので、複数の形式に対応する書き方があります。

このようにsource属性に、H.264とTheoraの動画を両方指定しておくと、ブラウザが読める方を自動判別して再生してくれます。

ただし、以下のようにmpeg4の動画も一緒に指定すると、Chromeでエラーが発生しましたので注意してください。

▼コード
<video controls="controls" width="400" height="300">
<source src="vc1_1_mpeg4aac.mp4" type="video/mp4">
<source src="vc1_1_h264AAC.mp4" type="video/mp4">
<source src="vc1_1.theora.ogv" type="video/ogg">
<p>ご利用のブラウザではこのタイプの動画は再生できません</p>
</video>

実際に、サーバにビデオファイルをアップロードしても、うまく再生できない場合があります。Webサーバー側でMIMEタイプが設定されていないからです。特に、2010年に発表されたWebmはほとんどのWebサーバでMIMEタイプが設定されていません。
利用しているサーバがapacheもしくはapache互換であれば、ビデオファイルをアップロードしたディレクトリに次の内容を記述した.htaccessファイルをアップロードしておくとよいでしょう。（※「徹底解説 HTML5 APIガイドブックビジュアル系API編」355ページより引用）

AddType video/mp4 .mp4
AddType video/ogg .ogv
AddType video/webm .webm
AddType audio/mp4 .acc
AddType audio/mpeg .mp3
AddType audio/ogg .ogg
AddType audio/wav .wav

HTML5ではvideo以外にも、sectionやnav、article、aside、header、footerなどの新しいタグが追加されページ構成がはっきりとわかりやすく指定できるようになりましたが、ここまで試してみた印象としてはvideoタグを実際に便利に使うためには、まだまだ改良の余地がありそうです。
まだ、正式勧告どころか最終草案の発表を待っている段階なので、これから徐々にブラウザでのサポートもすすんでくると思われます。
また、HTML 5の魅力はマークアップだけでなく、魅力的なAPIとの連携にもあります。
AjaxやHTTPで高速なリアルタイム通信アプリケーション開発を可能にするWebSocktやXDM、画像を加工したりJavaScriptで図を描いたりできるcanvas、テキストの編集を可能にするEditing APIなどにより、これまでより手軽にダイナミックなWebサイトの構築を可能にするだけでなく、Webアプリケーションの開発も可能になります。
これらの、APIについては以下に詳しく解説しています。

徹底解説 HTML5 APIガイドブックビジュアル系API編