HTML5のvideo/audio＋JavaScript APIテクニック：HTML5“とか”アプリ開発入門（11）

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

[白石俊平，株式会社オープンウェブ・テクノロジー] PC用表示関連情報

LINE

Hatena

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ブラウザで表示します）

　上記のコードでは、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ブラウザで表示します）

<!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/）始めました！

「HTML5“とか”アプリ開発入門」バックナンバー