HTML5 Media Element まとめ

※ Advent Calendarって、その日になると記事が出てくる仕組みではなくて、その日に合わせて投稿する仕組みだと気づかず、迂闊にもフライングしてしまった...

HTML5が10月に正式勧告化を迎えたということで、HTML5の主要新機能の一つ、メディアサポートについて広く浅くざっとまとめてみます。

<video>, <audio>, <track>要素

HTML文書内にタグとして動画や音声のファイルを記述して明示的に再生できるようにするには、<video>, <audio>タグを利用します。

,タグの例(1)

<audio src="audio.mp4"></audio>
<video src="video.mp4"></video>

上記の例(1)では、終端タグ</audio>, </video>の記述を忘れないように注意が必要です。

,タグの例(2)

<audio>
  <source src="audio.mp4" type="audio/mp4; codecs='mp4a.40.2'">
  <source src="audio.ogg" type="audio/ogg; codecs='vorbis'">
</audio>
<video>
  <source src="video.mp4" type="video/mp4; codecs='avc1.640029,mp4a.40.2'">
  <source src="video.webm" type="video/webm; codecs='vp8,vorbis'">
</video>

また、キャプションや字幕のテキストトラックデータを<track>タグで付けることも出来ます。テキストトラックはWebVTTフォーマットなどを利用します。WebVTTの詳細についてはMDNの記事等を参照して下さい。

タグの例

<video src="video.mp4">
  <track kind="subtitles" src="caption.ja.vtt" srclang="ja" label="日本語">
  <track kind="subtitles" src="caption.en.vtt" srclang="en" label="English">
</video>

<audio>, <video>タグには再生制御のために次のような属性を記述することが出来ます。

• preload: HTML文書の読み込みが完了すると直ちにメディアデータのダウンロードを開始する。(モバイルブラウザでは無効化されている場合が多いので要注意)
• autoplay: HTML文書の読み込みが完了すると直ちにバッファリングに応じて再生を開始する。(モバイルブラウザでは無効化されている場合が多いので要注意)
• loop: 繰り返し(ループ)再生する。
• muted: 音声を消音(ミュート)する。
• controls: プレーヤのコントローラ(再生、シーク等)のGUIを表示する。

,タグの例(3)

<audio src="audio.mp4" preload loop></audio>
<video src="video.mp4" muted controls></video>

スクリプトから制御

HTML5では、<audio>タグや<video>タグの再生制御をJavaScriptから行うことが可能です。これによって、controls属性で表示されるGUIに頼らずに、自前で好きなデザインでプレーヤを作りこむ、音声であればプレーヤを表示させないで例えば効果音の再生に使う、等が可能になります。

簡単な例の一つとして、ボタンをクリックすると音声を再生するサンプルコードを示します。(今回は割愛しますが、当然ながら他にもシーク、ダウンロード中断への対処、等、色々なことが可能です。)

HTML文書の例(1)

<button id="btn1">Sound Effect</button>
<audio id="effect1" src="se1.mp4" preload></audio>

JavaScriptによる音声再生の例

var a = document.getElementById('effect1');
var b = document.getElementById('btn1');
b.addEventListener('click', function() { a.play(); }, false);

カメラ・マイクのキャプチャ(getUserMedia())

Internet ExplorerやSafariでは未対応ですが、ChromeやFirefox, Opera等では、HTML5でカメラの映像やマイクの音声をHTML5文書内で表示・再生することが可能になっています。

HTML文書の例(2)

<video id="preview" autoplay></video>

getUserMedia()の例

navigator.getUserMedia =
  navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

navigator.getUserMedia(
  { video: true, audio: true },
  function(stream) {
    var v = document.getElementById('preview');
    v.src = URL.createObjectURL(stream);
  },
  function(error) {
    console.log(error);
  }
);

リアルタイムメディア伝送(WebRTC)

前項のgetUserMedia()でキャプチャした映像・音声をリアルタイムに別のブラウザに伝送することで、ブラウザ同士で双方向のビデオチャットや音声通話を可能にする機能が、Chrome(Blink)、Firefox等に搭載されています。この機能はWebRTC (Real-Time Communications between Web Browsers)と呼ばれています。

WebRTC Advent Calendar 2014では、WebRTCについて幅広く記事が執筆されていますので、よろしければぜひこちらもを御覧くだされば幸いです。

その他、さらに高度な機能

Web Audio API

音声については、さらにWeb Audio APIを使うことで、より高度で正確なタイミングでの再生制御や、シンセサイザーのような一からの音色の作成・合成も可能になります。

色々と書きたいところですが内容が多くなりすぎますので、申し訳ないですがここでは割愛します。

HTTPストリーミング (MediaSource)

HTML5というよりはHTML5.1では、というのが正確な話かもしれませんが、HTTPを用いたストリーミング再生を可能にするAPIとして、Media Source Extensions (MSE)が用意されています。現状では、Internet Explorer 11以降(Windows 8のみ)、Chrome(Blink)、Firefox、Microsoft Edge、Safari 9 for OS Xが対応しています。

こちらの技術的な詳細については、拙著の記事Media Source Extensionsを使ってみた (WebM編)及びMedia Source Extensionsを使ってみた (MP4編編)を参照して下さい。