HTML5の便利なTips100選第6回

プラグインは要らない！音声／動画対応したHTML5 - <audio>／<video>要素

HTML5では、新たに、要素（メディア要素）が追加されました。これらの要素と関連するAPIを利用することで、Flashなどのプラグインに頼らずとも、ブラウザ標準の機能だけで音声／動画ファイルを再生できるようになります。あとから述べるように、ブラウザによって対応する音声／ビデオ形式にバラツキがあるな

山田祥寛（YAMADA, Yoshihiro）

2013年1月26日 1:00

TIPS 041：音声ファイルを再生する
TIPS 042：動画ファイルを再生する
TIPS 043：音声／動画ファイルの再生を複数ブラウザ対応する
TIPS 044：音声ファイルをスクリプトから再生する
TIPS 045：動画ファイルをスクリプトから再生する
TIPS 046：ボリュームや再生速度を変更する
TIPS 047：動画を全画面表示する
TIPS 048：音声／動画ファイルの情報／状態を取得する
TIPS 049：音声／動画ファイルの取得状況に応じて処理を実行する
TIPS 050：音声／動画ファイルの状態に応じて処理を実行する
TIPS 051：音声／動画ファイル再生時のエラーを処理する
TIPS 052：音声／動画に対するユーザの操作を検出する

以下は、メディア要素のブラウザごとの対応状況です。

表1：メディア要素の対応バージョン

ブラウザ	対応バージョン
Internet Explorer	9以降
Firefox	3.6以降
Google Chrome	3以降
Safari	3以降
Opera	10.5以降

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

TIPS 041：音声ファイルを再生する

［リスト01］.mp3ファイルを再生するコード（audio.html）

<audio src="./audio/sample.mp3" controls autoplay loop preload="auto">
  ご利用のブラウザでは、音声の再生はできません
  ［<a href="./audio/sample.mp3">ダウンロード</a>］
</audio>

図1：指定された音声ファイルが再生される

表2：

属性	概要
src	音声ファイルのパス
type	コンテンツタイプ
*controls	再生コントローラを出力
*autoplay	自動再生を有効にするか
*loop	ループ再生するか
preload	音声ファイルを自動で読み込むか（autoplay属性の指定時は無視）
	設定値	概要
	auto	全ての情報を読み込む
	metadata	メタデータだけを読み込む
	none	再生までは読み込まない（事前読み込み無効）

controls属性によって表示される再生コンローラの見た目は、ブラウザによって異なります。

preload属性を有効にすることで、音声ファイルを事前に取り込めるため、再生がスムーズとなります。現在ではpreload属性を指定しなくても、事前読み込みを行うブラウザが多くなっているようです。ただし、逆にスマホ環境の多くではリソース消費を節約するためにpreload属性を無効にしていますので注意してください。

TIPS 042：動画ファイルを再生する

動画ファイルを再生するには、

［リスト02］.ogvファイルを再生するコード（video.html）

<video src="./video/sample.ogv" controls autoplay
  width="320" height="180" poster="wings.jpg">
  ご利用のブラウザでは、動画の再生はできません
  ［<a href="./video/sample.ogv">ダウンロード</a>］
</video>

図2：読み込み待ちでは画像ファイルを表示

図3：読み込み完了すると、自動で動画ファイルを再生開始

表3：

属性	概要
src	動画ファイルのパス
type	コンテンツタイプ
*controls	再生コントローラを出力
*autoplay	自動再生を有効にするか
*loop	ループ再生するか
preload	動画ファイルを自動で読み込むか
	設定値	概要
	auto	全ての情報を読み込む
	metadata	メタデータだけを読み込む
	none	再生までは読み込まない（事前読み込み無効）
width	再生画面の幅
height	再生画面の高さ
poster	再生待ちの画像