video/audio要素 HTML5で動画や音声を利用しよう！：HTML5“とか”アプリ開発入門（10）（1/2 ページ）

HTML5では＜video＞や＜audio＞といったタグを用いてマークアップを行うだけで、簡単に動画や音声の再生ができるようになる

» 2011年05月27日 00時00分公開

[白石俊平，株式会社オープンウェブ・テクノロジー]

＜video＞や＜audio＞タグで動画や音声を再生する

　HTML5では、動画や音声といったマルチメディアコンテンツを取り扱うことができるようになりました。従来、こうしたコンテンツの再生にはFlashなどのプラグイン技術が必須とされてきました。

　しかし、HTML5では＜video＞や＜audio＞といったタグを用いてマークアップを行うだけで、簡単に動画や音声の再生を行えます。それだけではありません。ブラウザによって直接これらの要素がサポートされることで、JavaScriptやCSSといった他のWeb技術とも非常に親和性が高いのも利点の1つです。JavaScriptを駆使して独自のビデオプレーヤを作ることも、CSSを使って動画にエフェクトを施すことも容易です。

　今回から数回にわたって、HTML5のマルチメディア機能を掘り下げて解説したいと思います。主に取り上げるコンテンツは以下のようなものです。

video/audio要素を用いたマークアップ
video/audio要素のJavaScript API／イベント
track要素の利用法
Audio Data API/Web Audio API

　今回は、video/audio要素を用いたマークアップについて解説します。ただし、video/audio要素に関する仕様はいまだに変化し続けているため、今回の記事は5月25日時点の仕様であることをご理解ください。

video要素の利用法

　video要素を利用するのは、基本的にとても簡単です。以下のように、src属性に動画／音声ファイルのURLを指定するだけです。

<!DOCTYPE html>
<video src="http://upload.wikimedia.org/wikipedia/commons/e/e6/Typing_example.ogv"
width="300" height="150" controls></video>

　ここでは他にwidth属性（動画の幅を指定）、height属性（動画の高さを指定）、controls属性（ブラウザネイティブのコントローラを表示）を使用しています。上のコードをブラウザ上で実行すると、以下のような結果が得られます。上記のファイルを再生できるブラウザはGoogle Chrome、Firefox、Operaです（動画フォーマットにOggを使用しているため。後述）。

サンプルの実行結果（画像はGoogle Chrome10で実行中のもの）（上の画像をクリックすると、Webブラウザで表示します）

　video要素が持つ属性は以下のとおりです。

src……動画ファイルのURLを表します。この属性を省略し、source要素（後述）でURLを指定することもできます。
poster……動画データが利用できない間、代わりに表示しておく画像のURLを指定します。動画の1フレーム目の画像を指定するのが典型的な利用例です。
preload……動画データを事前に読み込むよう、ブラウザに指示します。指定可能な値は“none”（事前読み込みを行わない）、“metadata”（動画の幅や高さ、1フレーム目の画像、再生時間など、動画のメタデータのみ取得する）、“auto”（動画データの先読みを行う）のいずれかです。省略時の動作はブラウザに依存します。
autoplay……動画を自動で再生します。省略時は、自動再生は行われません。
loop……動画が終わったら、また最初から繰り返し再生します。Chrome10、Opera11、IE9、Safari5はこの属性に対応しています（Firefoxでは未実装です）。省略時は、ループ再生は行われません。
muted……この属性を指定すると、音声がミュート状態で再生されます。
mediagroup……メディアリソースをグループ化し、それらのリソース間で自動的に同期を取るために用いられます。属性値にグループ名を指定し、同じグループ名のメディアリソースは同じグループと見なされます。
controls……この属性を指定すると、動画の再生を行うコントローラが表示されます。省略時は、コントローラは表示されません。
width……動画の幅。省略時は300pxとなります。
height……動画の高さ。省略時は150pxとなります。

　また、video/audio要素の内部には、ブラウザがその要素に対応していないときの代替コンテンツを記述することができます。代替コンテンツを利用すれば、video要素をサポートしていないブラウザ上でもFlash Playerなどを用いて動画／音声の再生を行ったり、コンテンツにアクセスしたりするための別の手段を提供することもできます。

　上記の属性や代替コンテンツを使用した、video要素のマークアップ例をもう一つ挙げます。画面が表示された瞬間に再生が始まり、永遠にループ再生されるような、架空の動画広告をマークアップする例です。

<aside class="ad">
<h1>広告エリア</h1>
<a href="http://external_site.com" title="スポンサーからのPR" rel="external" target="_blank">
<!--
自動で再生し、無限にループする動画広告。
音声は出力しない。
-->
<video src="ad_movie.ogg"
autoplay
loop
audio="muted"
poster="ad_poster.png"
width="200"
height="100">
<!-- ブラウザがvideo要素に対応していない場合は静止画が表示される -->
<img src="ad_static.png" width="200" height="100" alt="">
</video>
</a>
</aside>