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

TIPS 043：音声／動画ファイルの再生を複数ブラウザ対応する

現時点で、

表4：音声形式の対応状況

表5：動画形式の対応状況

よって、TIPS 041、042で紹介したサンプルも、実はChromeはじめ、特定のブラウザでしか再生できません。

当然、これでは困りますので、

［リスト03］主要なブラウザで再生できるように対応したコード（video_all.html）

<video controls autoplay width="320" height="180"
  poster="wings.jpg">
  <source src="./video/sample.mov">
  <source src="./video/sample.mp4">
  <source src="./video/sample.ogv">
  <source src="./video/sample.webm">
  ご利用のブラウザでは、動画の再生はできません
</video>

図4：動画を再生

TIPS 044：音声ファイルをスクリプトから再生する

Audioオブジェクトを利用することで、音声ファイルをスクリプトから操作することもできます。アプリで効果音を鳴らしたい場合などに利用できるでしょう。

［リスト04］指定された音声ファイルを再生するコード（media_audio.html）

window.addEventListener('DOMContentLoaded',
  function() {
    // オーディオ機能に対応しているかをチェック（1）
    if (HTMLAudioElement) {
      // 音声ファイルを準備（2）
      var a = new Audio('./audio/sample.mp3');
      // 音声ファイルをサポートしているかをチェック（3）
      var result = a.canPlayType('audio/mp3');
      if (result.match(/^(probably|maybe)$/)) {
        a.play();  // 再生開始（4）
      }
    }
  }
);

※サンプルを実行すると、音声だけが再生されます。

オーディオ機能は新しい命令なので、利用する前にまず、ブラウザが対応しているかをチェックしなければなりません。これを行っているのが（1）です。

HTMLAudioElementは、

オーディオ機能を利用できることが確認できたら、続いてAudioオブジェクトをインスタンス化します（2）。コンストラクタには、再生したい音声ファイルのパスを指定します。

続いて、canPlayTypeメソッドで音声ファイルを再生できるかをチェックします（3）。引数には調べたいコンテンツタイプを指定してください。さきほども述べたように、現時点ではブラウザによってサポートするファイル形式が異なりますので要注意です。

canPlayTypeメソッドの戻り値は、以下のとおりです。

表6：canPlayTypeメソッドの戻り値

よって、サンプルではifブロックで戻り値がprobablyかmaybeであることをチェックし、その場合のみ、再生を開始しているわけです。再生を開始するには、playメソッドを呼び出します（4）。

また、サンプルでは利用していませんが、再生を停止するにはpauseメソッドを呼び出してください。

TIPS 045：動画ファイルをスクリプトから再生する

前のTIPSと同じく、今度は動画ファイルをスクリプトから再生してみましょう。

［リスト05］指定された動画ファイルを再生するコード（media_video.html）

window.addEventListener('DOMContentLoaded',
  function() {
    // ビデオ機能に対応しているかをチェック（1）
    if (HTMLVideoElement) {
      // 動画ファイルを準備（2）
      var v = document.createElement('video');
      // 動画ファイルをサポートしているかをチェック（3）
      var result = v.canPlayType('video/ogg');
      if (result.match(/^(probably|maybe)$/)) {
        // 動画ファイルを準備＆登録（4）
        v.setAttribute('src', './video/sample.ogv');
        v.setAttribute('controls', '');
        v.setAttribute('width', '320');
        v.setAttribute('height', '180');
        document.body.appendChild(v);
        // 再生を開始（5）
        v.play();
      }
    }
  }
);

図5：動画ファイルの再生を開始

まず、ビデオ機能に対応しているかをHTMLVideoElementオブジェクトの有無でチェックしているのは、前のTIPSと同じです（1）。HTMLVideoElementオブジェクトは

続いて、ビデオ操作のためのオブジェクトを作成します。この際、Audioに対応するVideoのようなオブジェクトはなく、createElementメソッドで直接に

（3）では動画ファイルへの対応状況をチェックします。そして、指定のビデオ形式が対応している場合には、

再生は、playメソッドで開始できます（5）。

TIPS 046：ボリュームや再生速度を変更する

たとえば以下は、スライダーでボリュームと再生速度を変化し、同じくチェックボックスでミュートをオンオフするサンプルです。

［リスト06］スライダー／チェックボックスで動画を操作するコード（ope.html）

window.addEventListener('DOMContentLoaded',
  function() {
    if (HTMLVideoElement) {
      // ページ上の要素を取得
      var v = document.querySelector('#v');
      var vol = document.querySelector('#vol');
      var mute = document.querySelector('#mute');
      var speed = document.querySelector('#speed');
 
      // スライダーvolの値が変化した時、ボリュームを変化
      vol.addEventListener('change', function (e) {
        v.volume = vol.value;
      });
 
      // チェックボックスをオンオフした時にミュート切り替え
      mute.addEventListener('change', function (e) {
        v.muted = mute.checked;
      });
 
      // スライダーspeedの値が変化した時、再生速度を変化
      speed.addEventListener('change', function (e) {
        v.playbackRate = speed.value;
      });
      ...中略...
    }
  }
);
...中略...
<video id="v" src="./video/sample.ogv" autoplay loop
width="320" height="180"></video>
<!--コントロールのためのスライダー／チェックボックスを準備-->
<div>
  音量：<input id="vol" type="range" min="0" max="1" step="0.01" value="1" />
  （ミュート<input id="mute" type="checkbox" />）<br />
  速度：<input id="speed" type="range" min="0" max="2" step="0.01" value="1" />
</div>

図6：スライダー／チェックボックスに応じてボリューム／再生速度を調整

HTMLAudioElement／HTMLVideoElementオブジェクトでアクセスできる主なプロパティには、以下のようなものがあります。

表7：HTMLAudioElement／HTMLVideoElementオブジェクトの主なプロパティ

ここでは、それぞれスライダーの値やチェックボックスの状態に応じて、volume、playbackRate、mutedプロパティの値を操作しています。なお、volumeプロパティは0～1の間で、playbackRateプロパティは0（停止）～2（倍速）の間で変化できるように、スライダーの最大／最小値も設定しています。

TIPS 047：動画を全画面表示する

enterFullScreenメソッドを利用することで、動画の表示をフルスクリーンに切り替えることもできます。

たとえば以下は、［全画面表示］ボタンをクリックすることで動画をフルスクリーンモードに切り替える例です。

［リスト07］動画をフルスクリーンモードで再生するコード（full.html）

window.addEventListener('DOMContentLoaded',
  function() {
    if (HTMLVideoElement) {
      // ボタンクリック時の処理を定義
      document.querySelector('#full').addEventListener('click', function (e) {
        // 動画をフルスクリーンモードに切り替え
        var v = document.querySelector('#v');
        v.webkitEnterFullScreen();
      });
    }
  }
);
</script>
</head>
<body>
<video id="v" src="./video/sample.ogv" width="320" height="180"></video>
<input id="full" type="button" value="全画面表示" />

図7：フルスクリーンモードで動画を再生

現時点でフルスクリーンモードに対応しているブラウザは、Webkit系ブラウザであるChromeとSafariのみです。よって、enterFullScreenメソッドの呼び出しに際しても、ベンダープレフィックスを付けて「webkitEnterFullScreen()」としなければならない点に注意してください。

フルスクリーンモードは、［Esc］キーを押すことで解除できます。

TIPS 048：音声／動画ファイルの情報／状態を取得する

スクリプトから、音声／動画ファイルの情報（状態）を取得することもできます。

たとえば以下のサンプルは、1000ミリ秒おきに動画の情報を取得し、ページに反映する例です。

［リスト08］動画に関する情報を定期的に取得するコード（info.html）

window.addEventListener('DOMContentLoaded',
  function() {
    var v = document.querySelector('#v');
    // 1000ミリ秒おきに動画情報を更新
    setInterval(function() {
      // 取得した動画情報をページに反映
      document.querySelector('#src').innerHTML = v.currentSrc;
      document.querySelector('#dur').innerHTML = v.duration;
      document.querySelector('#start').innerHTML = v.startTime;
      document.querySelector('#end').innerHTML = v.ended;
      document.querySelector('#pause').innerHTML = v.paused;
      document.querySelector('#seek').innerHTML = v.seeking;
    }, 1000);
  }
);
...中略...
<video id="v" src="./video/sample.ogv" controls width="320" height="180">
</video>
<ul>
  <li>ファイル名：<span id="src"></span></li>
  <li>再生時間：<span id="dur"></span>秒</li>
  <li>開始時間：<span id="start"></span>秒</li>
  <li>終了済？：<span id="end"></span></li>
  <li>停止中？：<span id="pause"></span></li>
  <li>シーク中？：<span id="seek"></span></li>
</ul>

図8：動画再生中の情報を定期的に更新＆表示

HTMLAudioElement／HTMLVideoElementオブジェクトでアクセスできる音声／動画ファイルの情報には、以下のようなものがあります。

表8：HTMLAudioElement／HTMLVideoElementオブジェクトの主なプロパティ

いずれのプロパティも参照できるのみで、値の変更はできません。

TIPS 049：音声／動画ファイルの取得状況に応じて処理を実行する

readyStateプロパティを利用することで、音声／動画ファイルの読み込み状況を感知できます。たとえば、以下は動画の画面をクリックした時に、動画ファイルの読み込み状況をチェックし、ダウンロード済みの場合のみ再生を開始する例です。

［リスト09］画面クリック時に動画を再生するコード（ready.html）

window.addEventListener('DOMContentLoaded',
  function() {
    var v = document.querySelector('#v');
    v.addEventListener('click', function (e) {
      // 動画ファイルがダウンロード済みの場合のみ再生開始
      if (v.readyState === 4) {
        v.play();
      }
    });
  }
);

図9：画面クリックで再生を開始

readyStateプロパティの戻り値は、以下のとおりです。

表9：readyStateプロパティの戻り値

サンプルでは、readyStateプロパティが4を返した（＝十分なデータがダウンロード済みである）場合のみ、再生を開始しています。