■<video>タグで動画を埋め込む

現在、インターネット上で動画が提供される場合には、Flashなどの独自フォーマットを利用するのが一般的です。 こうした独自フォーマットの動画を再生するには、 それぞれのフォーマットを再生するのに必要なプラグインを、ブラウザに追加インストールする必要があります。

HTML5では、任意の動画フォーマットを文書に埋め込むための<video>タグが追加されています。 この<video>タグを使用することで、ユーザーにプラグインをインストールしてもらうことなく、 HTMLからシンプルに動画を扱えるようになります。 感覚的には<img>タグで画像を扱うような感じです。

<video>タグで文書に動画を埋め込む場合には、例えば以下のように記述します。

とてもシンプルです。

■ユーザー環境への配慮

<video>タグをサポートしているブラウザは、まだ多くありません。 もし、<video>タグを使用する場合には、サポートされていない環境への配慮が必要となるでしょう。

<video>～</video>には、 <video>タグがサポートされていない環境で表示させるメッセージを記述することができます。

また、HTML5から追加される<source>タグを使用することで、ブラウザに動画の再生候補を提示できます。 <source>タグでは、フォーマットの異なる動画データを複数指定することができます。 ブラウザは、記述された順に再生可能なデータを利用するので、より多くの環境で動画を視聴してもらえる可能性が高くなります。 <source>タグのtype属性では、動画データのMIMEタイプやコーデックを指定することができます。

■<video>タグの様々な属性

<video>タグには、動画再生の詳細を指定する様々な属性があります。

poster属性で動画のヒントとなる画像を表示する

<video>タグのposter属性は、ユーザー環境で利用できる動画が無い場合に表示させる画像ファイルを指定することができます。 poster属性で指定する画像は、ユーザーにその動画の内容がどのようなものかを知らせるヒントとなるものが適しています。 例えば、動画の開始部分のフレーム画像などです。

controls属性でインターフェースを表示する

<video>タグのcontrols属性を指定すると、再生・一時停止・再生位置の移動・ボリュームなど、 動画を利用しやすくするインターフェースを、ブラウザが自動で表示することになっています。

autoplay属性で動画を自動再生する

<video>タグのautoplay属性を指定すると、ウェブページを読み込んだ時点で、動画が自動再生されます。

preload属性で動画をあらかじめ読み込む

<video>タグのpreload属性を指定すると、ウェブページを読み込んだ時点で動画を裏側で読み込みます。 動画をあらかじめ読み込んでおくことで、ユーザーが再生ボタンを押したときに動画の再生がスムースになるかもしれません。 ただ、初期値はpreload="auto"で、一般的なブラウザではpreload属性を指定しなくても動画はあらかじめ読み込まれます。

もし、ユーザーが動画をあまり必要としていないことが想定される場合や、ウェブサーバに余分な負担を掛けたくない場合には、 preload="none"を指定すると良いでしょう。

また、preload="metadata"を指定すると、動画全体ではなく、 動画のサイズ・最初のフレーム・トラックリスト・再生時間などの動画のメタデータのみを取得します。

ちなみに、このpreload属性は、以前にはautobuffer属性と呼ばれていましたが、名前が変更されたようです。

■HTML5でスタンダードになる動画形式は？

現在、<video>タグをサポートしているブラウザは、 Firefox、Google Chrome、Safari、Operaの新しいバージョンなどですが、 これらのブラウザ間では、サポートされている動画規格が統一されていません。 どの動画規格がHTML5にふさわしいかについての検討はされていますが、推奨される標準規格はまだ未定のままです。

ウェブで動画を提供する場合、今のところFlashが事実上の標準といえるかもしれません。 その理由は、すでに多くのユーザー環境でFlashのプラグインがインストールされており、 比較的高い確率で動画を再生してもらえるからです。

それなら、HTML5でもFlashを標準規格として採用すれば良さそうなものですが、 やはりHTML5のような皆が利用するオープンな技術仕様に、 Flashのような一企業が提供する規格を採用することは問題があるでしょう。 また、iPhoneやiPadなどの端末では、Flashがサポートされていないなど、 とりあえずFlashで提供しておけば大丈夫…というわけにもいかなくなっています。

今後、HTML5で標準採用される可能性のある動画規格としては、FirefoxやGoogle ChromeがサポートするOgg Theoraや、 SafariやGoogle ChromeがサポートするH.264などが挙げられるでしょうが、 どの規格も技術特許への懸念や、ブラウザベンダー各社の自社サービスとの相性などの問題から、 合意を得ることはなかなか難しいようです。 場合によっては、標準規格が決められないまま、各ブラウザベンダーに任せられることになるかもしれません。

■<video>タグによる動画再生サンプル

以下は、<video>タグを使用した動画再生のサンプルソースです。SafariとGoogle Chromeで動画を再生できます。