HTML5 <video>
<video>タグは、動画を再生する際に使用します。 <video>タグを使用することで、ユーザーにFlashなどのプラグインをインストールしてもらうことなく、標準のHTMLからシンプルに動画を扱えるようになります。 感覚的には<img>タグで画像を扱うような感じです。
動画ファイルの指定には、<video>タグのsrc属性か、<video>～</video>の中で<source>タグを使用します。 <source>タグを使う方法では、フォーマットの異なる複数の動画データを指定して、ブラウザに動画の再生候補を提示することができます。 ブラウザは、記述された順に再生可能なデータを利用するので、より多くの環境で動画を視聴してもらえる可能性が高くなります。
<video>～</video>の中には、 <video>タグがサポートされていない環境で表示させるメッセージを記述することができます。
<video>
<source src="sample.mp4">
<source src="sample.ogv">
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>
<source src="sample.mp4">
<source src="sample.ogv">
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>
<video>タグには、動画再生の詳細を指定する以下のような属性があります。
<video src="sample.ogv" autoplay></video>
preload属性で動画をあらかじめ読み込む
preload属性を指定すると、ウェブページを読み込んだ時点で動画を裏側で読み込みます。 初期値はpreload="auto"で、一般的なブラウザではpreload属性を指定しなくても動画はあらかじめ読み込まれます。
preload="metadata"を指定すると、動画全体ではなく、 動画のサイズ・最初のフレーム・トラックリスト・再生時間などの動画のメタデータのみを取得します。
もし、ユーザーが動画をあまり必要としていないことが想定される場合や、ウェブサーバに余分な負担を掛けたくない場合には、preload="none"を指定すると良いでしょう。
<video src="sample.ogv" autoplay></video>
controls属性でインターフェースを表示する
controls属性を指定すると、再生・一時停止・再生位置の移動・ボリュームなど、動画を利用しやすくするインターフェースを、ブラウザが自動で表示することになっています。
<video src="sample.ogv" autoplay></video>
■HTML4.01からHTML5へのバージョンアップによる変更点
video要素は、HTML5から新たに追加された要素です。
■属性
src属性
動画ファイルを指定する
poster属性
動画のヒントとなる画像を表示する
preload属性
動画をあらかじめ読み込む（auto、metadata、none）
autoplay属性
動画を自動再生する
loop属性
ループ再生を指定する
controls属性
インターフェースを表示する
width属性
幅を指定する
height属性
高さを指定する
動画ファイルを指定する
poster属性
動画のヒントとなる画像を表示する
preload属性
動画をあらかじめ読み込む（auto、metadata、none）
autoplay属性
動画を自動再生する
loop属性
ループ再生を指定する
controls属性
インターフェースを表示する
width属性
幅を指定する
height属性
高さを指定する
現在、<video>タグをサポートしているブラウザは、 Firefox、Google Chrome、Safari、Operaの新しいバージョンなどですが、 これらのブラウザ間では、サポートされている動画規格が統一されていません。 どの動画規格がHTML5にふさわしいかについての検討はされていますが、推奨される標準規格はまだ未定のままです。
今後、HTML5で標準採用される可能性のある動画規格としては、 Firefox・Google ChromeがサポートするOgg Theora、 Safari・Google ChromeがサポートするH.264、 Google Chrome・OperaがサポートするWebMなどが挙げられるでしょうが、 どの規格も技術特許への懸念や、ブラウザベンダー各社の自社サービスとの相性などの問題から、 合意を得ることはなかなか難しいようです。 場合によっては、標準規格が決められないまま、各ブラウザベンダーに任せられることになるかもしれません。
以下のサンプルでは、<source>タグで３種類の動画形式を指定しています。 mp4形式はGoogle Chrome・Safari向け、ogv形式はFirefox・Opera向け、webm形式はGoogle Chrome・Opera向けです。
■使用例
HTMLソース
<p>HTML5のvideoタグによる動画再生</p><video controls autoplay poster="firstframe.jpg" width="320" height="240">
<source src="sample.mp4">
<source src="sample.ogv">
<source src="sample.webm">
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>
<p>HTML5のvideoタグによる動画再生</p><video controls autoplay poster="firstframe.jpg" width="320" height="240">
<source src="sample.mp4">
<source src="sample.ogv">
<source src="sample.webm">
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>
