HTML5で新たに追加された<video>タグを使うと、Flash無しでブラウザで動画を再生できます。

Flashに依存しないということで、Flashに対応していない端末、特にiPhone・iPad・iPod touchなどに対し、ビデオ配信を行う際は<video>タグだけが唯一の方法となります。 その一方で、HTML5の<video>タグの仕様では、動画の形式までは決められておらず、どの動画形式を採用するかはブラウザの実装側に委ねられ、混乱を招く原因となっています。 そこで、そういった諸々をおさらいし、正しく<video>タグを使えるようにしましょう。

<video>タグの記述方法を理解する。

動画を再生させるだけの簡単なサンプルを用意しました。 対応ブラウザは、最新のForefox・Google Chrome・Safari、そしてIE9です。 未対応のブラウザの場合は、対応していない旨のメッセージが表示されます。

サンプルを見る

では、サンプル解説に入る前に、<video>タグで動画を再生させるための基本的な記述を見てみましょう。

<video src="sample.mp4" controls autoplay></video>

これで、「mp4形式」に対応したブラウザであれば、動画が再生できます。

controlsは、再生ボタン・シークバーなどのコントロールを表示するかどうかの指定、autoplayは、ページを表示したら、直ちに再生を開始するかどうかの指定です。

なお<video>タグ用の「mp4形式」は、動画のコーデックに「h.264」、音声コーデックに「AAC」を用います。 「h.264」形式は、ブルーレイで採用されたり、PSPなどの様々な機器で採用され、事実上動画形式の標準フォーマットとしての地位を確立しています。

※コーデックとは？
映像や、音声を圧縮する際の圧縮形式のこと、画像でいうとjpg・png・gifなど、音声だとmp3などかこれにあたる。画像や音声だと、コーデックがそのまま拡張子になることが多いが、動画の場合、動画部分と音声部分を同梱するかたちになるため、動画形式をそのまま拡張子として用いることは無い。
その代りに「mp4」や「avi」といった動画形式を拡張子として用いることが多い。
動画と音声をパッケージ化し、場合によってはその他のメタ情報などを含めて一つのファイルとして纏めるためのファイル形式を「コンテナフォーマット」と呼び、「コンテナ化」されるファイルのコーデックには特に制約はありません。

ただし、冒頭で説明している通り、どの動画形式を採用するかはブラウザの実装側に委ねられています。 そして、「h.264」に対応しているブラウザは、Safari・IE9・Google Chromeで、Firefox・Operaは対応していません。

また、Googleもゆくゆくは「h.264」に対して非対応を表明しており、採用コーデックの行方はいまだ不透明です。

なぜこのようなことになっているかというと、「h.264」には、多数の特許権が含まれており、「h.264」を採用した製品をリリースするには、ライセンス料を支払わなくてはいけません。 現在、無料動画に関してはライセンス料は無料となっていますが、今後ライセンス料が必要になる可能性があり、Mozilla・Googleなどがその部分を懸念しているためです。 似たような問題に、GIFのライセンス料問題があります。

そういうわけで、Firefox・Opera・（将来的に）Google Chromeにも対応させましょう。 Firefox・Google Chrome・Operaで利用可能な動画形式に「Web M」というものがあります。

Web MはGoogleがリリースした、フリーの動画形式で、動画部分に、Googleが買収した「VP8」、音声部分に、オープンソースの音声形式「Vorbis」を採用しています。 「VP8」は、特許上の問題を抱えているという懸念がささやかれていますが、今のところは利用に問題はなさそうですし、そのあたりのことはエンドユーザーにはあまり関係の無い話です。

前置きが長くなりましたが、「mp4」と合わせて「Web M」動画を用意すれば、ひとまずは全ブラウザをサポートできるということになります。 ※ただし、「Web M」登場以前のブラウザ（古いFirefoxや古いOperaなど）をサポートしようと思うともう少し話がややこしくなりますが、IE以外のブラウザは自動更新が前提なので、まぁいいでしょう。

さて、動画を2種類用意したのはいいですが、ブラウザの振り分けはどのようにやるのでしょうか？ JavaScriptを使ってUA判定させる・・・？

そんな面倒なことはしなくても大丈夫です。 <video>タグの仕様では、動画形式は各ブラウザの実装に委ねられているので、もともと複数の動画を用意しなくてはいけない前提で仕様が策定されているので、動画振り分けの仕組みも盛り込まれています。

<video width="480" height="270" controls autoplay>
    <source src="sample.mp4">
    <source src="sample.webm">
</video>

この様に<video>タグ内に複数のタグを記述すれば、ブラウザは上から順にファイルを参照し、表示可能な動画があれば、その動画を再生します。 <video>タグでは、JavaScriptを使って対応ブラウザのチェックをするなどの処理は全く必要ないのです。

また、そもそも<video>タグに対応していないブラウザはどう振り分けるかというと

<video width="480" height="270" controls autoplay>
    <p>このブラウザでは対応しておりません。IE9/Forefox/Chrome/Safari等をご利用ください。</p>
    <source src="sample.mp4">
    <source src="sample.webm">
</video>

この様に、<video>タグ内に未対応ブラウザ用の記述をすれば、その内容が表示されることになります。

河野　義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナー（WCBセミナー）の講師としてもおなじみ。

(参考サイト:Selectors-jQuery日本語リファレンス )

マイナビグループのクリエイター転職支援・派遣情報サイト