Video/Audio要素のマークアップ方法

Video/Audio要素は、動画データや音声データをHTMLから取り扱えるようにしたものだ。

VideoとAudioの利用法は至って簡単だ。

  1. video/audioタグを記述する
  2. src属性に動画/音声ファイルのURLを指定する

たったこれだけで、動画や音声をWebページ内に埋め込むことができる。また、タグの内部に記述したコンテンツは、video/audioタグをサポートしていないブラウザにとっての代替コンテンツとして利用できる。 

<video src="動画ファイルのURL">
  動画を視聴するにはvideoタグをサポートしたブラウザが必要です。
</video>

<audio src="音声ファイルのURL"></audio>

また、リソースの指定をさらに細かく行うためのsource要素もHTML 5から導入された。この要素を使用すると、メディアデータのMIMEタイプやコーデック方法を細かく指定することができる。また、sourceタグは複数指定することが許されている。それらのsourceタグを、ブラウザは記述された順序通りに評価し、ブラウザ自身が取り扱うことのできるメディアデータを自動で判別してくれる。

<video>
  <!-- Ogg theora形式とQuicktime形式のうち、取り扱い可能な方が利用される -->
  <source src='sample.ogv' type='video/ogg; codecs="theora, vorbis"'>
  <source src='sample.mov' type='video/quicktime'>
</video>

とくにvideoタグに関しては、ブラウザごとにサポート状況が大きく異なるため、sourceタグによる複数のフォーマット指定が非常に有効だ。原稿執筆時点での、各ブラウザによる動画形式のサポート状況をまとめたのが以下のリストだ。

  • Firefox 3.5 … Ogg theoraをサポート
  • Safari 4 … QuicktimeとH.264をサポート
  • Google Chrome 3 … Ogg theoraとH.264をサポート

以下に示すのは、video/audio/sourceタグで利用可能な属性の一覧だ。

video/audioタグの属性

属性 説明
src 動画/音声データのURL
poster 動画/音声データを利用できない場合に、代わりに使用する画像のURLを指定する（videoのみ）
autobuffer 動画/音声データのバッファリングを自動で開始するかをbooleanで指定する
autoplay 再生を自動で行うかどうかをbooleanで指定する
loop ループ再生を行うかどうかをbooleanで指定する
controls ブラウザ固有のコントロールUIを表示するかどうか
width 動画の幅(ピクセル)(videoのみ)
height 動画の高さ(ピクセル)(videoのみ)

sourceタグの属性

属性 説明
src 動画/音声データのURL
type 動画/音声データのMIMEタイプ
media このsourceタグで指定された動画/音声データを利用するメディアタイプ(メディアクエリで指定)

Video/Audioを用いたプログラミング

video/audioタグは、再生や一時停止などの操作をJavaScriptから行うことができる。以下のサンプルでは、独自に定義したボタンで動画の再生と一時停止を行えるようにしている。また、動画の再生が終了したらalertメッセージを出力する。 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<script type="text/javascript">
  var video;
  function init() {
    video = document.getElementById("video1");
    // 動画再生が終了したら呼び出されるイベントハンドラの登録
    video.addEventListener("ended", function() {
      alert("終了しました");
    }, true);
    // エラー
    video.addEventListener("error", function() {
      switch (video.error.code) {
      case MediaError.MEDIA_ERROR_ABORTED:
        alert("データのダウンロードが中断されました。");
      break;
      case MediaError.MEDIA_ERROR_NETWORK:
        alert("ネットワークエラーが発生しました。");
      break;
      case MediaError.MEDIA_ERROR_DECODE:
        alert("デコードに失敗しました。");
      break;
      case MediaError.MEDIA_ERROR_SRC_NOT_SUPPORTED:
        alert("サポートされていないファイル形式です。");
      break;
      default:
        alert("不明なエラーが発生しました。");
      }
    });
  }
  function play() {
    // 動画の再生
    video.play();
  }
  function pause() {
    // 動画の一時停止
    video.pause();
  }
  function fastforward() {
    // 動画の早送り（Firefoxでは動作しない）
    video.playbackRate += .2;
  }
</script>
</head>
<body onload="init()">
  <!-- controls属性がある場合、ブラウザネイティブのコントロールが表示される -->
  <!-- Safariの場合はOggビデオが再生できないので差し替えること -->
  <video id="video1" controls src="http://upload.wikimedia.org/wikipedia/commons2/Apeldoorn_Oranjepark.ogv">
  </video><br/>
  <button onclick="play()">再生</button>
  <button onclick="pause()">一時停止</button>
  <button onclick="fastforward()">早送り</button>
</body>
</html>

実行結果