連載
» 2011年07月28日 00時00分 公開

HTML5“とか”アプリ開発入門(11):HTML5のvideo/audio+JavaScript APIテクニック

HTML5の<video>や<audio>タグとJavaScript APIで、自由に動画や音声を楽しもう。カスタムのビデオプレイヤーだって作れる

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

video/audio要素のAPIやイベントを利用する

 video/audio要素は、JavaScriptを用いた細かい制御を行えるのも特徴の1つです。

 カスタムのビデオプレイヤーを作ることも容易ですし、動画からフレームを切り出してCanvasに投影し、グラフィックとして取り扱う、なんてテクニックもあります。

 今回は、そうしたJavaScript APIの利用方法について見ていきましょう。なお、この記事は2011年5月25日版の仕様に基づいています。

video/audioに共通のメソッド、プロパティ

 video要素とaudio要素は、メソッドやプロパティの多くが共通です。そうしたメソッドやプロパティを表すのが以下の一覧です。

  • MediaError error……エラーを表すオブジェクト。MediaErrorは、codeというプロパティを持ち、こちらの仕様で定義されている
  • DOMString src……src属性の値
  • DOMString currentSrc……現在再生中のメディアリソースのURL
  • unsigned short networkState……ネットワーク状態。この値の定数は、こちらの仕様で定義されている
  • DOMString preload……preload属性の値
  • TimeRanges buffered……バッファ済みの範囲を表す。時間の範囲は、こちらの仕様で表されるTimeRangesインターフェイスで表される
  • void load()……メディアデータのロードを行う
  • DOMString canPlayType(DOMString type)……リソースのMIMEタイプを与えられると、そのリソースを再生できるかどうかを" probably"(codecsパラメータの値も参照した上で、恐らく再生可能)、""(再生できない)、"maybe"(どれにも当てはまらない)といった文字列で返す
  • boolean seeking……シーク中かどうか
  • double currentTime……現在の再生時間
  • double initialTime……再生開始時間
  • double duration……メディアの再生時間長
  • Date startOffsetTime……再生が開始された時刻(NaNの場合もある)
  • boolean paused……一時停止中かどうか
  • double defaultPlaybackRate……デフォルトの再生速度。初期値は1.0
  • double playbackRate……再生速度。初期値は1.0
  • TimeRanges played……再生済みの時間の範囲を表す
  • TimeRanges seekable……シーク可能な時間の範囲を表す
  • boolean ended……再生が終了しているかどうか
  • boolean autoplay……autoplay属性の値
  • boolean loop……loop属性の値
  • void play()……再生を開始する
  • void pause()……一時停止する
  • DOMString mediaGroup……mediagroup属性の値
  • MediaController controller……複数のメディアを同期させて操作することができるコントローラ。mediagroup属性の値が同じメディアデータが、同じコントローラを共有する。コントローラを明示的に作成して、プロパティにセットすることも可能
  • boolean controls……controls属性の値(ブラウザデフォルトのコントローラを使用するかどうか)
  • double volume……音声のボリューム。0.0から1.0の間
  • boolean muted……muted属性の値
  • boolean defaultMuted……デフォルトでミュートされていたかどうか
  • MultiplaTrackList audioTracks……音声トラックの情報。複数トラックを切り替えたり、有効/無効にすることが可能
  • ExclusiveTrackList videoTracks……動画トラックの情報。複数トラックを切り替えることが可能
  • TextTrack[] textTracks……テキストトラックの情報(字幕やチャプタータイトルなど)
  • MutableTextTrack addTextTrack(DOMString kind, DOMString label, DOMString language)……テキストトラックを追加する

video要素に固有のメソッド、プロパティ

 video要素は、前述のものに加えて以下のようなプロパティを利用できます。

  • unsigned long width……動画の幅
  • unsigned long height……動画の高さ
  • unsigned long videoWidth……再生中の動画のもともとの幅
  • unsigned long videoHeight……再生中の動画のもともとの高さ
  • DOMString poster……poster属性の値

  document.getElementById()などで要素のDOMオブジェクトを取得すれば、こうしたメソッドやプロパティを利用できます。

 例えば、JavaScriptを用いて動画の再生、停止を行うには、以下のようなコードを記述します。

<<!DOCTYPE html>
<meta charset="UTF-8">
<script>
  function playVideo() {
    var video = document.getElementById("v");
    video.play(); // ビデオの再生
  }
  function pauseVideo() {
    var video = document.getElementById("v");
    video.pause(); // ビデオの一時停止
  }
</script>
<video id="v" width="400">
  <source src="http://download.blender.org/peach/trailer/trailer_480p.mov">
  <source type="video/ogg" src="http://download.blender.org/peach/trailer/trailer_400p.ogg">
</video><br>
<button onclick="playVideo();">再生</button>
<button onclick="pauseVideo();">停止</button>
サンプルの実行結果(画像はGoogle Chrome12で実行中のもの)(上の画像をクリックすると、Webブラウザで表示します) サンプルの実行結果(画像はGoogle Chrome12で実行中のもの)(上の画像をクリックすると、Webブラウザで表示します)

 上記のコードでは、play()やpause()といったメソッドを用いて、動画の制御を行っています。

audio要素に固有のメソッド、プロパティ

 audio要素に固有のAPIとしては、「Audio」コンストラクタを用いてDOMオブジェクトを作成できることがあげられます。

 Audioコンストラクタは、引数に音声データのURLを取れます(省略可能)。

var audio = new Audio("http://example.com/audio.aac");

 このようにして生成されたオブジェクトは、指定されたURLの音声データを自動的に読み込みます(preload属性がtrueの状態)。音声データを先読みしておく、などの用途に用いられるでしょう。

メディアデータの再生に伴うイベント

  • emptied……要素が初期化された際に発生するイベント
  • loadstart……データの読み込みを開始した
  • progress……データの読み込み中(断続的に何度も発生する)
  • loadedmetadata……メディアのメタデータ(再生時間、動画の幅や高さなど)を読み込んだ
  • loadeddata……メディアデータを読み込んだ
  • canplay……再生を開始できる(程度にデータを読み込んだ)
  • canplaythrough……このままのダウンロード速度が続けば、最後まで再生できる(程度にデータを読み込んだ)
  • load……データのダウンロードが完了した
  • stalled……データのダウンロードが意図せず中断された
  • suspend……データのダウンロードが中断された(エラーではない)
  • abort……データのダウンロードがエラーにより中止された
  • error……エラーが発生した
  • loadend……データの読み込みが(理由はどうあれ)完了した。load、abort、error後に発生する
  • playing……一時停止やネットワーク遅延から復帰し、再生が再開された
  • waiting……次のフレームを描画するためのデータ待ち
  • seeking……シーク中
  • seeked……シークが完了した
  • ended……再生が完了した
  • durationchange……duration属性の値が変更された
  • timeupdate……再生位置が変更された
  • play……再生が開始された
  • pause……再生が一時停止された
  • ratechange……再生速度が変更された
  • volumechange……ボリュームが変更された

 こうしたイベントを利用して、独自の動画プレイヤーに磨きをかけてみましょう。以下のサンプルは、rangeタイプの入力フィールドを利用して、動画の再生位置を制御できるようにしたものです。

 動画の再生位置が進むに従い、スライダーの位置が変化します。スライダーの位置を変更すると、動画の再生位置もそれに合わせて変化します。

サンプルの実行結果(画像はGoogle Chrome12で実行中のもの)(上の画像をクリックすると、Webブラウザで表示します) サンプルの実行結果(画像はGoogle Chrome12で実行中のもの)(上の画像をクリックすると、Webブラウザで表示します)
<!DOCTYPE html>
    <meta charset="UTF-8">
    <!-- ビデオ -->
    <video id="v" width="400">
  <source src="http://download.blender.org/peach/trailer/trailer_480p.mov">
  <source type="video/ogg" src="http://download.blender.org/peach/trailer/trailer_400p.ogg">
  </video>
  <!-- メディアプレイヤー -->
  <div id="controller">
  <button id="playOrPauseButton">再生</button>
  <button id="stopButton">停止</button>
  <input type="range" id="playback" disabled>
  </div>
  <script>
    // ビデオ要素
    var video = document.getElementById("v");
    // 現在の再生位置を示すバー
    var playback = document.getElementById("playback");
    // 再生/中断ボタン
    var playOrPauseButton = document.getElementById("playOrPauseButton");
    // 停止ボタン
    var stopButton = document.getElementById("stopButton");
  
    // ビデオのメタデータを読み込んだら、スライダーを利用可能にする
    video.addEventListener("loadedmetadata", function() {
    playback.disabled = false;
    playback.min = playback.value = video.initialTime || 0;
    playback.max = video.duration;
    }, false);
 
    // 再生が開始されたら、ボタンのラベルを変更
    video.addEventListener("play", function() {
    playOrPauseButton.textContent = "中断";
    }, false);
   // 一時中断されたら、ボタンのラベルを変更
    video.addEventListener("pause", function() {
    playOrPauseButton.textContent = "再生";
    }, false);
   // 再生時間が変化するたび、スライダーの位置を更新
    video.addEventListener("timeupdate", function() {
    playback.value = video.currentTime;
    }, false);
   // スライダーの値が変化したら、動画の再生位置を変更
    playback.addEventListener("change", function() {
    video.currentTime = this.valueAsNumber;
    }, false);
   // 再生/中断ボタンを押された
    playOrPauseButton.addEventListener("click", function() {
    if (video.paused) {
    video.play();
    } else {
    video.pause();
    }
    }, false);
  
    // 終了ボタンをクリックされたら、ビデオを一時停止し、
    // 再生位置を初期に戻す
    stopButton.addEventListener("click", function() {
    video.pause();
    video.currentTime = video.initialTime || 0;
    }, false);
  </script>

まとめ

 今回はvideo/audio要素のAPIやイベントを利用する方法についてお話ししました。次回以降は、HTML5仕様の外で策定が進みつつある、マルチメディア関連のAPIについて順次解説していく予定です。

著者紹介

株式会社オープンウェブ・テクノロジー 代表

白石俊平(@Shumpei

Google API Expert(HTML5)
HTML5開発者コミュニティ「html5-developers-jp」管理人

 

最近は、「テクノロジーを社会貢献に活かしつつビジネスにする」ことを目指しつつ、日々奮闘中。「社会貢献×テクノロジー」をテーマにしたブログ「GOODxTech Blog」(http://blogs.itmedia.co.jp/goodxtech/)始めました!


Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。