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

HTML5では、新たに

あとから述べるように、ブラウザによって対応する音声／ビデオ形式にバラツキがあるなどの問題もありますが、メディア要素を利用することでメディアファイルの扱いがぐんとカンタンになるでしょう。

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

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

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

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：

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：

ほとんどの属性は

一般的には、動画の一部を示した静止画など、内容を類推できるようなものを指定します。