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

2013年1月26日(土)
山田 祥寛(YAMADA, Yoshihiro)

HTML5では、新たに

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

[第6回目次]
  • 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 再生待ちの画像

ほとんどの属性は

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

  • <audio>、<video>要素を使ってブラウザだけで音声/動画を再生するサンプル

著者
山田 祥寛(YAMADA, Yoshihiro)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています