HTML5 の audio 要素と video 要素の使用

HTML5 では HTML 文書へ簡単にマルチメディアコンテンツを埋め込むことを可能にする、<audio> 要素および <video> 要素を使用したビルトインのメディアサポートが導入されました。

コンテンツの埋め込み

コンテンツを HTML 文書に埋め込むのは非常に簡単です。

<video src="https://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Your browser does not support the <code>video</code> element.
</video>

例えば、上記の例では Theora プロジェクトの Web サイトにあるサンプルビデオを再生します。

以下は、HTML 文書に audio を埋め込む例です。

<audio src="/test/audio.ogg">
<p>Your browser does not support the <code>audio</code> element.</p>
</audio>

src 属性では、オーディオファイルの URL またはローカルシステムにあるファイルのパスを指定できます。

<audio src="audio.ogg" controls autoplay loop>
<p>Your browser does not support the <code>audio</code> element </p>
</audio>

このコード例では <audio> 要素の属性を使用しています:

controls : Web ページに、オーディオ用の標準的な HTML5 コントロールを表示します。
autoplay : 自動的にオーディオを再生します。
loop : 自動的にオーディオを繰り返します (ループ)。

<audio src="audio.mp3" preload="auto" controls></audio>

preload 属性は、大きなファイルをバッファリングする audio 要素で使用されます。これは 3 種類の値から 1 つをとります:

"none" はファイルをバッファリングしません。
"auto" はメディアファイルをバッファリングします。
"metadata" はファイルのメタデータだけをバッファリングします。

<source> 要素を指定することで、複数のリソースを指定することができます。特に、ブラウザに応じて異なる形式のデータを指定する際に有用です。

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

例えば、上記の例では Ogg フォーマットをサポートしているブラウザでは Ogg ファイルが再生されます。もしブラウザが Ogg に対応していなければ、MPEG-4 形式のファイルが再生されます。ブラウザごとの audio および video 要素でサポートするメディアフォーマットの一覧もご覧ください。

メディアファイルがどのコーデックを要求するかを指定することもできます。これは、ブラウザがより知的に判断することを可能にします:

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
  Your browser does not support the <code>video</code> element.
</video>

上記の例では、ビデオで Dirac および Speex コーデックを使用すると指定しました。ブラウザは Ogg に対応するが指定されたコーデックはサポートしていない場合、ビデオは読み込まれません。

type 属性が指定されていない場合はメディアの種類をサーバから引き出して、ブラウザがそれを扱えるかを確認します。メディアを描画できない場合は、次の source を確認します。指定された source 要素で使用できるものがない場合は、video 要素に対して error イベントを発します。type 属性が指定されている場合は、それがブラウザで再生できるタイプと比較されます。それを認識できない場合、サーバへの問い合わせはありません。代わりに、直ちに次の source を確認します。

メディア再生に関連づけられたイベントの一覧は Media event をご覧ください。ブラウザごとにサポートされるメディアフォーマットについて詳しくは、audio および video 要素でサポートするメディアフォーマットをご覧ください。

コンテンツの再生制御

<audio> 要素あるいは <video> 要素を用いて HTML 文書にコンテンツを埋め込むと、JavaScript を通じてそれらコンテンツの制御を行うことができます。例えば、再生制御を行うようなコードとして以下のように書くことができます:

var v = document.getElementsByTagName("video")[0];
v.play();

一行目では文書中に初めて現れる video 要素を捕らえ、二行目で video 要素の play() メソッドを呼び出しています。このメソッドは <audio> 要素や <video> 要素の実装に用いられている nsIDOMHTMLMediaElement インタフェースにおいて定義されています。

JavaScript を用いた HTML5 オーディオプレイヤーの再生、一時停止、音声の増減の制御は簡単です。

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">Play the Audio</button>
  <button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
  <button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
  <button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>

メディアのダウンロードの停止

メディアの再生の停止は要素の pause() メソッドを呼び出すだけと簡単ですが、ブラウザはメディア要素がガベージコレクションで処分されるまで、メディアのダウンロードを続けます。

次の例は、直ちにダウンロードを停止するものです:

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src");

メディア要素の src 要素を削除する (または空文字列を設定する。これらはブラウザに依存します) ことで、要素の内部デコーダを破棄してネットワーク経由のダウンロードを止めます。仕様書では removeAttribute() を使用するシナリオについて完全には明示しておらず、また <video> の 'src' 属性に空文字列を指定すると不必要な要求が発生する可能性があります (Mozilla Firefox 22)。

メディアのシーク

メディア要素は、メディアコンテンツの再生位置を特定の場所へ移動することサポートしています。これは要素の currentTime プロパティの値を設定することでできます。要素のプロパティについて詳しくは、HTMLMediaElement をご覧ください。再生を始めたい位置の時間を、秒単位の値で指定します。

現時点でメディアのシークが可能な範囲を知るために、要素の seekable プロパティを使用できます。これはシークが可能な時間の範囲を持つ TimeRanges オブジェクトを返します。

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();  // Returns the starting time (in seconds)
mediaElement.seekable.end();    // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end();      // Returns the number of seconds the browser has played

再生範囲の指定

<audio> 要素または <video> 要素でメディアの URI を指定する際、メディアで再生する範囲を指定する追加情報を任意で含めることができます。これを実現するには、井桁記号 ("#") の後でメディア部分の指示を行います。

時間範囲は以下の構文で指定します:

#t=[starttime][,endtime]

時間は秒数 (浮動小数点数値として) または時/分/秒をコロン区切り (2 時間 5 分 1 秒を 2:05:01 というように) で指定できます。

以下に例を示します:

https://foo.com/video.ogg#t=10,20: ビデオは 10 秒時点から 20 秒時点までの範囲を再生すると指定します。
https://foo.com/video.ogg#t=,10.5: ビデオは始点から 10.5 秒時点までの範囲を再生すると指定します。
https://foo.com/video.ogg#t=,02:00:00: ビデオは始点から 2 時間までの範囲を再生すると指定します。
https://foo.com/video.ogg#t=60: ビデオは 60 秒時点から終端まで再生すると指定します。

メディア要素の URI 指定における再生範囲は、Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) で追加されました。現時点で Gecko は Media Fragments URI specification のうち、この部分だけを実装しています。またメディア要素のソースを指定する場合にのみ使用でき、アドレスバーでは使用できません。

フォールバックオプション

中間に含まれた HTML、例えばメディア要素の開始タグと終了タグの間にある HTML は、HTML5 メディアをサポートしないブラウザが解釈します。この仕組みを活用して、それらのブラウザ向けの代替メディアを提供することができます。

この章では、ビデオに対する 2 つの代替手段を紹介します。それぞれのケースでブラウザが HTML5 ビデオをサポートする場合はそれが使用されます。そうでない場合は、フォールバックオプションが使用されます。

Flash の利用

<video> 要素がサポートされない場合でも、Flash 形式の動画再生に Flash を使用することができます:

<video src="video.ogv" controls>
    <object data="flvplayer.swf" type="application/x-shockwave-flash">
      <param value="flvplayer.swf" name="movie"/>
    </object>
</video>

Internet Explorer 以外のブラウザとの互換性を保つため、object タグに classid を含めるべきではないことに注意してください。

Java applet を利用した Ogg ビデオの再生

Java をサポートするが HTML5 ビデオをサポートしないブラウザで Ogg ビデオ再生の代替手段として使用できる、Cortado という Java アプレットがあります:

<video src="my_ogg_video.ogg" controls width="320" height="240">
  <object type="application/x-java-applet" width="320" height="240">
     <param name="archive" value="cortado.jar">
     <param name="code" value="com.fluendo.player.Cortado.class">
     <param name="url" value="my_ogg_video.ogg">
     <p>You need to install Java to play this file.</p>
  </object>
</video>

上記の例の <p> 要素のような、Cortado の objecte 要素の代替となる子要素を置かない場合、Firefox 3.5 をインストールした環境ではビデオをネイティブに扱いますが Java がインストールされていないと、誤ってページのコンテンツを表示するためにプラグインのインストールが必要であるとユーザに通知します。

エラーのハンドリング

Gecko 2.0 が必要(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) より、エラーハンドリングが最新の HTML5 仕様に適合するよう修正されました。メディア要素自身に error イベントが発行されるのに代わり、エラーになったソースに対応する <source> 子要素に発行されるようになりました。

これによりどのソースが読み込み失敗したのかを検出できるようになり、役に立つでしょう。以下の HTML で考えてみましょう:

<video>
<source id="mp4_src"
  src="video.mp4"
  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</source>
<source id="3gp_src"
  src="video.3gp"
  type='video/3gpp; codecs="mp4v.20.8, samr"'>
</source>
<source id="ogg_src"
  src="video.ogv"
  type='video/ogg; codecs="theora, vorbis"'>
</source>
</video>

Firefox は MP4 および 3GP を特許で妨害されているためにサポートしませんので、id が "mp4_src" および "3gp_src" の <source> 要素は Ogg のリソースが読み込まれる前に error イベントを受け取るでしょう。各 source は順番に表示できるかが試みられ、いったん読み込みが成功すれば残りの source は読み込みしようとしません。

ソースが読み込まれない状況の検出

<source> 子要素の読み込み失敗を検出するには、メディア要素の networkState 属性を確認します。これが HTMLMediaElement.NETWORK_NO_SOURCE である場合は、すべての source で読み込みが失敗したことがわかります。

メディア要素の子要素として新たに <source> 要素を挿入することで別のソースを追加すると、Gecko はそのリソースの読み込みを試みます。

デコードできるソースがない場合に代替コンテンツを表示する

現在のブラウザでデコードできるソースがない場合に、ビデオの代替コンテンツを表示するためのもうひとつの方法が、最後の source 要素にエラーハンドラを追加することです。そして、ビデオを代替コンテンツで置き換えます:

<video controls>
  <source src="dynamicsearch.mp4" type="video/mp4"></source>
  <a href="dynamicsearch.mp4">
    <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS">
  </a>
  <p>Click image to play a video demo of dynamic app search</p>
</video>

var v = document.querySelector('video'),
    sources = v.querySelectorAll('source'),
    lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
  var d = document.createElement('div');
  d.innerHTML = v.innerHTML;
  v.parentNode.replaceChild(d, v);
}, false);

HTML	Audio/Video Canvas WebGL SVG MathML WebForms AppCache Microformats SemanticTags
JavaScript	Storage IndexedDB WebSockets WebWorkers Events Drag/Drop ProtocolHandler Geolocation Focus
CSS	NewSelectors Typography Visual Effects