動画の再生領域を設定するvideoタグは、HTML5の中でも注目の要素でした。

HTML5以前のWebブラウザでは、OSに組み込まれているプレイヤーやコンテンツ再生システムをプラグイン(ActiveXなど)の形で埋め込み動画を再生していたため、「環境に応じた動画再生の仕組み」をコンテンツ制作者の側で意識する必要があります。これが、HTML5時代になりvideoタグが広まれば「Webブラウザの標準機能」で再生可能になるのでは、という期待感が高まっていたわけですね。

残念ながら、こうした期待は動画コーデックの標準化に失敗したことから、かなりの部分で裏切られます。videoタグで「再生の仕組み」自体は標準化されたものの、肝心の動画コンテンツが標準化されず、Webブラウザによって対応するコーデック(エンコード)形式が異なる状況になってしまったからです。結局は、Webブラウザにあわせて複数の形式でエンコードした動画を用意しないといけない、というある意味で以前と大差ない状況になってしまいました。
せめてmpeg1など「最低限(ライセンス面の不安なく)再生できる形式」を標準化してくれれば、ずっと使いやすいものになったでしょうに……

と、今更言っても仕方ないので、とりあえずvideoタグによる動画再生を試してみましょう。videoタグの使い方は、ごく単純。videoタグのsrc属性で「再生したい動画ファイルの場所」を指定するだけです。

たとえば、videotest.ogvというファイルを再生するための領域を作るなら

<video src="videotest.ogv"></video>

のようにします。と、これだけで終わればよかったのですが……

実際には、このやり方だと指定の動画ファイルを再生できない環境(ogvを指定するとIEやSafariなどogvに対応しないWebブラウザでは再生できない)が出てきてしまうので、videoタグのみで動画再生を実現する場合は複数の「再生候補」を指定する必要があります。そのための仕組みが、「sourceタグによる複数ファイルの列挙」です。

これは、再生候補となる動画ファイルを指定するsourceタグをvideoタグの子要素として持たせておくもので、ogv/mp4どちらかを環境に合わせて再生する場合は以下のようにします。Webブラウザは、sourceタグで列挙された候補の中から再生可能なものを選んで再生するわけです。

<video>
  <source src="data/videotest.ogv">
  <source src="data/videotest.mp4">
</video>

とりあずogvとmp4(H.263/H.264とAACなど)でエンコードした動画を用意しておけば、ほとんどの環境で再生できるでしょう。

現状のWebブラウザの実装では、こうして作成したvideoタグの領域には動画の最初のフレームが表示され、右クリックで再生やコントローラーの表示などの操作が可能になるようです。videoタグの属性に「controls」を追加しておくと、最初からコントローラーを表示することもできます。

その他よく使う属性としては、自動的に再生するautoplayやループ再生を指定するloopなどがあります。ただしautoplayを指定すると、ユーザーの意図によらず勝手に動画の再生が開始されることになるので、注意が必要でしょう。
サーチエンジンから移動したページでいきなり大音量の動画ファイルが再生されたら……かなり気まずい思いをすることもありますよね。

なお、ネット上に動画ファイルを配置し再生する際は、サーバー側でMIME-Typeを指定しておいた方が良いでしょう(最初からsrcを指定したvideo要素で再生する場合は問題ないようですが、JavaScriptで再生する場合はMIME-Typeがないと再生できないことがあるようです)。予めMIME-Typeが設定されていないサーバーでは、以下のような.htaccessファイルを用意するなどして動画ファイルのMIME-Typeを設定することを検討してください。

AddType video/ogg .ogv
AddType video/mp4 .mp4

創作プログラミングの街