HTML5 アプリケーションをビルドする

  • [アーティクル]

実用的なクロスブラウザー HTML 5 のオーディオとビデオ

John Dyer

コード サンプルのダウンロード

HTML5 の audio タグと video タグが最初に導入されたときには、コーデックにもブラウザーにも互換性がないため使いにくく、大規模な Web サイトでの展開は現実的ではありませんでした。これらのタグは実験的なコードを作成している会社やクロスブラウザーのメディアを開発している会社には役立ちましたが、一般に使用するためには HTML5 のメディア API は信頼性が低すぎました。

今日では状況が変わりました。ブラウザーと JavaScript ライブラリは成熟し、オーディオとビデオのコンテンツを表示するすべてのプロジェクトで HTML5 メディアを既定で使うことが可能であり、またそうすべき段階になりました。既存の Flash や Silverlight のビデオ コンテンツを HTML5 での再生用に改良することも非常に簡単になりました。今回は、メディアの再生に HTML5 を使用するメリットを説明し、サンプル コードを示しながら、開発者が直面するいくつかの重要な問題とその解決策を説明します。

HTML5 メディアのメリット

メディアに HTML5 を使用するメリットは、開発者が Flash や Silverlight を習得しなくても、HTML、CSS、JavaScript のスキルを活用できることです。HTML でボタンを作成し、それを JavaScript で制御できる開発者であれば、既に HTML5 のメディアを開発するのに必要な知識はすべて備わっています。HTML5 メディアには新たに track 要素を使ったキャプションやサブタイトルのサポートが組み込まれました。さらに、バイト位置を直接指定してアクセスするビデオ操作など、追加機能の提案も既に検討されています。

さらに、HTML5 のビデオやオーディオを使用するメディアは Flash や Silverlight のプラグインを使って再生するメディアより高いパフォーマンスを発揮します。これによりバッテリの寿命が長くなり、スムーズな再生を行うことができます。また、Windows Phone 7.5、Apple iOS、Android (さらに Windows 8 の Metro スタイル ブラウザー) を搭載するモバイル デバイスは、HTML5 のビデオとオーディオを使ったメディアの再生しかサポートしません。Android デバイスの中には Flash をサポートするものもありますが、先ごろ Adobe はモバイル向けの Flash の開発中止を発表したので、今後は HTML5 がモバイル デバイスでメディアを再生する唯一の手段となります。

HTML5 によるシンプルな再生とコントロール

Flash や Silverlight を使ったビデオの再生では、ビデオ (ここでは video.mp4) を再生する最もシンプルなマークアップは次のようなものでした。

<object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
  <param name="src" value="player.swf?file=video.mp4">
  <embed src="player.swf?file=video.mp4" width="640"
    height="360"></embed>
</object>

これらのネストされた object、param、embed の各タグと、h.264 エンコードの同じビデオを再生する次の HTML5 の video タグとを比べてみてください。

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

ずっとシンプルです。ほとんど説明の要らない簡単な HTML です。ブラウザーは、ネイティブの高さと幅を判断できるところまでビデオをダウンロードした時点で、それに応じてビデオのサイズを変更します。ただし、img タグと同様、ページでサイズ調整が発生しないように、height 属性と width 属性を指定することが相変わらずお勧めです。style 属性を使えば、ピクセル数や比率で幅と高さの値を指定することも可能です (以降の例ではどちらも使用します)。

上記で 1 つ追加した属性が controls です。これによりブラウザーは組み込みの再生コントロール バーを表示します。これには、通常、再生と一時停止の切り替えボタン、進行状況のインジケーター、ボリューム コントロールが含まれます。controls は ブール属性なので、値を割り当てる必要はありません。より XHTML 的な構文として controls="controls" と記述することも可能ですが、ブラウザーは controls が使われていない場合には false、使われている場合または値を割り当てられている場合には true と判断します。

HTML5 メディアの属性と子のソース タグ

audio 要素と video 要素には、エンド ユーザーにメディア コンテンツを表示する方法をブラウザーに指定するため、新しい属性がいくつか導入されています。

  • src: 再生するメディア ファイルを 1 つ指定します (異なるコーデックのソースが複数ある場合については、後ほど説明します)。
  • poster: ユーザーが再生をクリックする前に表示する画像の URL を指定します (video 要素のみ)。
  • preload: ブラウザーがメディア ファイルを読み込む方法とタイミングを次の 3 つの値から指定することができます。none: ユーザーが再生を開始するまでビデオはダウンロードされません。metadata: メディアの高さ、幅、再生時間を判断できるところまでデータをダウンロードするようブラウザーに指示します。auto: ユーザーが再生を開始する前にダウンロードしておく量をブラウザーが決定します。
  • autoplay: ページの読み込み直後にビデオを再生する場合に使用するブール属性です (モバイル デバイスでは帯域幅の確保のために、通常無視されます)。
  • loop: ビデオが最後まで終了したら再生を繰り返すよう指定するブール属性です。
  • muted: ビデオをミュートで開始するかどうかを指定するブール属性です。
  • controls: ブラウザーの組み込みコントロールを表示するよう指定するブール属性です。
  • width と height: 表示するビデオのサイズを指定します (video 要素のみ、比率は指定できません)。

時間付きのテキスト トラック

各ブラウザーでは track 要素の実装も始まっています。これによってビデオにサブタイトル、クローズド キャプション、翻訳、コメントを提供することができます。track 要素を子に持つ video 要素の例を次に示します。

<video id="video1" width="640" height="360" preload="none" controls>
  <track src="subtitles.vtt" srclang="en" kind="subtitles" label="English subtitles">
</video>

track 要素には次の 5 つの属性があり、上記の例ではそのうちの 4 つを使用しています。

  • src: Web ビデオ テキスト トラック (WebVTT) ファイルまたは時間付きテキスト マークアップ言語 (TTML) ファイルへのリンクを指定します。
  • srclang: TTML ファイルの言語 (en、es、ar など) を指定します。
  • kind: テキスト コンテンツの種類を subtitles、captions、descriptions、chapters、または metadata の中から指定します。
  • label: トラックを選択するユーザーに表示するテキストを指定します。
  • default: 最初に開始する track 要素を指定するブール属性です。

WebVTT は簡単なテキスト ベースのフォーマットです。1 行の宣言 (WEBVTT FILE) で始まり、開始時間と終了時間を --> 文字で区切って記述し、次にこの時間内に表示するテキストを記述します。2 つのテキストを別の時間に表示する、簡単な WebVTT ファイルの例を次に示します。

WEBVTT FILE

00:00:02.5 --> 00:00:05.1
This is the first line of text to display.

00:00:09.1 --> 00:00:12.7
This line will appear later in the video.

この記事の執筆時点では、Internet Explorer 10 Platform Preview と Chrome 19 のみが track 要素をサポートしていますが、今後は他のブラウザーでもサポートされると考えられます。後ほど紹介する JavaScript ライブラリを使うと、track 要素が未実装であるブラウザーにも、そのサポートを追加することが可能です。また captionator.js (captionatorjs.com、英語) というスタンドアロンの track ライブラリを使うと、track タグを解析し、WebVTT と TTML (および SRT と YouTube SBV) の各ファイルを読み込み、ネイティブ サポートされていないブラウザーに UI を提供することができます。

HTML5 メディアのスクリプト

先ほど controls 属性を使って、video タグや audio タグにネイティブのコントロールを表示するようブラウザーに指示しました。この場合、ブラウザーごとにコントロールのセットが異なるため、Web サイトのデザインに合わず問題になることがあります。一貫性のあるエクスペリエンスを提供する場合は、ブラウザーのコントロールを使用せず、JavaScript で制御するカスタムのボタンをページに追加することができます。ビデオやオーディオの再生状態を追跡するイベント リスナーを追加することも可能です。次の例では、controls 属性を削除し、基本的なコントロール バーとして機能するマークアップを video 要素の下に追加しました。

<video id="video1" style="width:640px; height:360px" src="video.mp4"> </video> 
<div>
  <input type="button" id="video1-play" value="Play" />
  <input type="button" id="video1-mute" value="Mute" />
  <span id="video1-current">00:00</span>
  <span id="video1-duration">00:00</span>
</div>

図 1 に示す簡単な JavaScript により、ビデオの再生を制御し、ビデオの現在時間を表示します。その結果、図 2 (Internet Explorer 9 でのレンダリング) に示したように動作するプレーヤーが作成されます (HTML5 では script タグの type="text/javascript" 属性は必須ではありません)。

図 1 ビデオ再生の制御

<script>
// Wrap the code in a function to protect the namespace
(function() {
// Find the DOM objects
var  video = document.getElementById("video1"),
  playBtn = document.getElementById("video1-play"),
  muteBtn = document.getElementById("video1-mute"),
  current = document.getElementById("video1-current"),
duration = document.getElementById("video1-duration");

// Toggle the play/pause state
playBtn.addEventListener("click", function() {
  if (video.paused || video.ended) {
    video.play();
    playBtn.value = "Pause";
  } else {
    video.pause();
    playBtn.value = "Play";
  }
}, false);

// Toggle the mute state
muteBtn.addEventListener("click", function() {
  if (video.muted) {
    video.muted = false;
    muteBtn.value = "Mute";
  } else {
    video.muted = true;
    muteBtn.value = "Unmute";
  }
}, false);

// Show the duration when it becomes available
video.addEventListener("loadedmetadata", function() {
  duration.innerHTML = formatTime(video.duration);
}, false);

// Update the current time
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(video.currentTime);
}, false);

function formatTime(time) {
  var 
    minutes = Math.floor(time / 60) % 60,
    seconds = Math.floor(time % 60);

  return   (minutes < 10 ? '0' + minutes : minutes) + ':' +
           (seconds < 10 ? '0' + seconds : seconds);
}

})();

A Working Video Player That Shows the Time
図 2 動作中に時間を表示するビデオ プレーヤー

図 1 に示すコードは、play メソッドと pause メソッド、timeupdate イベントと loadedmetadata イベント、および paused、ended、currentTime、duration の各プロパティを使用しています。完全な HTML5 メディア API (w3.org/TR/html5/video.html、英語) には本格的なメディア プレーヤーの作成に使用する細かい属性やインターフェイスが含まれています。先ほど説明した HTML5 メディア タグの属性以外にも、HTML5 メディアのオブジェクトには JavaScript からのみアクセス可能なプロパティがあります。

  • currentSrc: source タグを使用している場合、ブラウザーが現在再生しているメディア ファイルを表します。
  • videoHeight と videoWidth: ビデオのネイティブのサイズを表します。
  • volume: 音量を示す 0 ～ 1 の値を指定します (モバイル デバイスはハードウェアのボリューム コントロールを優先するため無視します)。
  • currentTime: 再生の現在位置を秒単位で示します。
  • duration: メディア ファイルの総再生時間を秒単位で示します。
  • buffered: メディア ファイルのどの部分がダウンロード済みかを示す配列です。
  • playbackRate: ビデオの再生速度を示します (既定は 1)。この数字を変更して高速再生 (1.5) やスロー再生 (0.5) が可能です。
  • ended: ビデオが最後まで送られているかどうかを示します。
  • paused: 開始時は常に true、ビデオの再生が開始されると false になります。
  • seeking: ブラウザーがダウンロードを試み、新しい位置に移動しようとしていることを示します。

HTML5 メディア オブジェクトのスクリプトでは、次のメソッドも使用します。

  • play: ビデオを読み込んで再生を試みます。
  • pause: 現在再生中のビデオを一時停止します。
  • canPlayType(type): ブラウザーがサポートするコーデックを検出します。video/mp4 などの種類を送ると、ブラウザーは "probably"、"maybe"、"no"、または空白の文字列を返します。
  • load: src 属性を変更した場合に新しいビデオを読み込むために呼び出されます。

HTML5 メディアの仕様は 21 個のイベントを用意しています。このうち、よく使われるものを次に示します。

  • loadedmetadata: 再生時間とサイズを認識した時点で発生します。
  • loadeddata: ブラウザーが現在位置で再生可能になった時点で発生します。
  • play: ビデオが一時停止状態または終了状態ではなくなり、ビデオが開始された時点で発生します。
  • playing: 一時停止、バッファーリング、シーク後に、再生が開始された時点で発生します。
  • pause: ビデオが一時停止した時点で発生します。
  • ended: ビデオが最後まで送られた時点で発生します。
  • progress: メデイア ファイルがさらにダウンロードされるたびに発生します。
  • seeking: ブラウザーがシークを開始した時点で発生します。
  • seeked: ブラウザーがシークを終了した時点で発生します。
  • timeupdate: メディア リソースの再生中に再生位置が変化した時点で発生します。
  • volumechange: muted プロパティまたは volume プロパティが変化したときに発生します。

これらのプロパティ、メソッド、イベントはユーザーにリッチなメディア エクスペリエンスを提供する強力なツールで、すべて HTML、CSS、JavaScript から操作できます。図 1 に示した基本的な例では、まずページ上のすべての要素に対応する変数を作成しています。

// Find the DOM objects
var video = document.getElementById("video1"),
  playBtn = document.getElementById("video1-play"),
  muteBtn = document.getElementById("video1-mute"),
  current = document.getElementById("video1-current"),
  duration = document.getElementById("video1-duration");

次に、メディアの再生を制御するため、ボタンに click イベントを追加します。次のようにしてビデオの再生と一時停止の状態を切り替え、ボタン上のラベルを変更しています。

// Toggle the play/pause state
playBtn.addEventListener("click", function() {
  if (video.paused || video.ended) {
      video.play();
      playBtn.value = "Pause";
  } else {
      video.pause();
      playBtn.value = "Play";
  }
}, false);

最後にメディア オブジェクトにイベントを追加し、現在状況を追跡します。ここでは timeupdate イベントをリッスンし、秒を"分 : 秒" の書式に変換して、コントロール バーの再生現在時間を更新します。

// Update the current time
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(media.currentTime);
}, false);

HTML5 メディアの問題

残念ながら、HTML5 メディアをすべてのブラウザーとデバイスで動くようにすることは、この例で示したほど簡単ではありません。先に述べたように、track 要素がサポートされないブラウザーもあります。ここでは、audio タグと video タグを使う場合に発生する 3 つの問題と、その解決策について説明します。この記事の最後では、この 3 つの解決策をすべて含み、容易に配置できる 1 つのパッケージとなっている JavaScript ライブラリを紹介します。

HTML5 のオーディオとビデオのコーデック サポート: HTML5 メディアを使った開発における最初の問題は、ビデオとオーディオのコーデックのサポートに一貫性がないことです。上記の例は Internet Explorer 9 以降、Chrome、および Safari で動作しますが、Firefox や Opera では動作しません。Firefox や Opera は HTML5 video タグをサポートしていますが、h.264 コーデックをサポートしません。これは、著作権上の懸案によりブラウザー ベンダーが 2 つのコーデック推進グループに分かれているためです。そのため、HTML5 メディアについてどのブラウザーがどのコーデックをサポートしているかを示す図 3 のような対応表が使用されるようになりました。　

図 3 各ブラウザーでのコーデック サポート

ビデオ IE8 IE9 以上 Chrome Safari モバイル Firefox Opera
MP4 (h.264/AAC) 非対応 対応 対応 対応 対応 非対応 非対応
WebM (VP8/Vorbis) 非対応 インストール 対応 非対応 非対応 対応 対応

 

Internet Explorer 9 以上、Safari、Chrome、モバイル デバイス (iPhone、iPad、Android 2.1 以上、Windows Phone 7.5 以上) はすべて、通常 MP4 コンテナーで使われる h.264 ビデオ コーデックをサポートしています。一方、Firefox と Opera は WebM コンテナーで使われる VP8 ビデオ コーデックをサポートしています。Chrome は WebM もサポートしていますが、h.264 のサポートは今後停止することを公表しています。Internet Explorer 9 以上では、エンド ユーザーがコーデックをインストールすることによって WebM をレンダリングすることが可能です。最後に、Firefox、Opera、Chrome は Ogg コンテナーで使われる Theora コーデックもサポートしていますが、今後は WebM をサポートしていくため、Theora はサポートされなくなる (Firefox 3.x をサポートする必要のあるユーザーでない限り) 見通しなので、説明を簡単にするためこの表と例からは省きました。

オーディオについても、ブラウザー ベンダーは 2 つのコーデック推進グループに分かれています。おなじみの MP3 フォーマットをサポートするグループ (Internet Explorer 9、Chrome、Safari) と Ogg コンテナーで使われる Vorbis コーデックをサポートするグループ (Firefox、Opera) です。さらに、多くのブラウザーは WAV ファイル フォーマットの再生に対応しています。図 4 を参照してください。

図 4 各ブラウザーでのオーディオ サポート

オーディオ IE8 IE9 以上 Chrome Safari モバイル Firefox Opera
MP3 非対応 対応 対応 対応 対応 非対応 非対応
Ogg Theora 非対応 インストール 対応 非対応 非対応 対応 対応
WAV 非対応 非対応 可能性あり 対応 対応 対応 対応

 

これらの相違に対応するため、video タグと audio タグには複数の子 source タグを指定できます。これにより、再生可能なメディア ファイルをブラウザーが選択できます。各 source 要素には次の 2 つの属性があります。

  • src: メディア ファイルの URL を指定します。
  • type: MIME の種類およびオプションとして特定のビデオ コーデックを指定します。

h.264 と VP8 の両方のビデオ コーデックを指定する場合、次のようなマークアップを使用します。

<video id="video1" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

iOS と Android の以前のバージョンでは MP4 ファイルを最初に記述する必要があります。

このマークアップは最近のブラウザーではすべて動作します。ブラウザーが再生できると判断したビデオを JavaScript コードで制御します。オーディオではマークアップは次のようになります。

<audio id="audio1">
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.oga" type="audio/oga">
</audio>

オーディオまたはビデオのコンテンツを独自のサーバーでホストする場合、メディア ファイルごとに MIME の種類を正しく設定する必要があります。これを正しく設定しないと、HTML5 対応のブラウザーの多く (Internet Explorer や Firefox など) ではメディアが再生されません。IIS 7 で MIME の種類を追加するには、[機能ビュー] で [MIME の種類] をダブルクリックし、[操作] ウィンドウで [追加] をクリックし、拡張子 (mp4) と MIME の種類 (video/mp4) を追加し、[OK] をクリックします。使用する他の種類 (webm と video/webm) にも、これを繰り返して行います。

古いブラウザーのサポート: 2 つのメディア ファイル (ビデオでは MP4 と WebM など) を含めることにより、HTML5 メディアは最近のすべてのブラウザーで再生されるようになります。しかし、古いブラウザー (たとえば Internet Explorer 8) で video タグを使っても、ビデオは表示されません。それらのブラウザーでは video の開始タグ (<video>) と終了タグ (</video>) の間の HTML をレンダリングします。つまり、次の例ではユーザーに最新のブラウザーを使用するように促すメッセージが表示されます。

<video id="video1" width="640" height="360" >
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Please update your browser</p>
</video>

HTML5 に対応しないブラウザーを使用しているユーザーがビデオを再生できるようにするには、図 5 に示すように、Internet Explorer 9、Safari、Chrome 向けに提供するのと同じ MP4 を再生する Flash を埋め込むという代替策が可能です。

図 5 Flash によるビデオの再生

 

<video id="video1" width="640" height="360" >
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <object width="640" height="360" classid="clsid:
    d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=
      "http://fpdownload.macromedia.com/pub/
      shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
        <param name="SRC" value="player.swf?file=video.mp4">
        <embed src="player.swf?file=video.mp4" width="640"
          height="360"></embed> 
        <p>Please update your browser or install Flash</p>
  </object>
</video>

このマークアップによりすべてのブラウザーでビデオを再生する、なんらかの方法を提供することができます。HTML5 にも Flash にも対応していないブラウザーではアップグレードを促すメッセージが表示されます。このネストされたマークアップの動作に関する詳細については、Kroc Camen による 「すべての人にビデオを」 (camendesign.com/code/video_for_everybody、英語) を参照してください。

しかし、この方法には欠点がいくつかあります。まず、多くのマークアップをメンテナンスすることになります。次に、少なくとも 2 つのメディア ファイルをエンコードして保存する必要があります。さらに、ページに追加した HTML/JavaScript コントロールは埋め込みの Flash プレーヤーでは機能しません。これらの問題を解決するいくつかの JavaScript ライブラリを後ほど紹介しますが、その前に最後の 1 つの問題について説明します。

全画面表示のサポート: Flash と Silverlight にはどちらも全画面表示モードがあり、ユーザーはビデオや他のコンテンツを画面全体に表示することができます。簡単なボタンを作成してそれに ActionScript (Flash 用) または C# (Silverlight 用) の全画面表示コマンドを結び付けることにより、この機能を実装できます。

今日のブラウザーは、ユーザーがキーボードまたはメニュー コマンド (通常は F11 や Cntl+F) によって実行できる、同様の全画面表示モードを備えています。しかし、開発者がページ上のボタンから全画面表示モードを開始できるような機能の JavaScript API は最近まで存在しませんでした。このため、HTML5 ビデオはブラウザー ウィンドウ全体には表示されますが、画面全体には表示されませんでした。

Safari、Chrome、Firefox は W3C が提案した FullScreen API のサポートを 2011 年の末に追加し、これにより Flash と Silverlight と同等の機能が提供されます。Opera チームは現在この実装を行っているところですが、Internet Explorer は、この記事の執筆時点では API の実装に関してまだ決定を下していません。Windows 8 の Metro スタイルのブラウザーは既定で全画面表示になりますが、デスクトップ Internet Explorer のユーザーは、メニューのオプションまたは F11 キーを使って、手動で全画面表示に切り替える必要があります。

全画面表示モードをサポートしているブラウザーで全画面表示に切り替えるには、全画面に表示される要素で requestFullscreen メソッドを呼び出します。全画面表示を終了するコマンドは、ドキュメント オブジェクトで document.exitFullscreen メソッドを呼び出します。W3C の提案はなお未完成のため、ここでは詳しく触れませんが、API の状況については私のブログ bit.ly/zlgxUA (英語) でも追跡しています。

HTML5 ビデオとオーディオの JavaScript ライブラリ

多くの開発者が HTML5 のビデオとオーディオを容易に扱うためのコードを 1 つのパッケージにまとめた JavaScript ライブラリを作成しています。　優れたオープン ソースのライブラリには MediaElement.js、jPlayer、VideoJS、Projekktor、Playr、LeanBack などがあります。詳細な機能の比較リストについては praegnanz.de/html5video (英語) を参照してください。

video タグまたは audio タグを用意すれば、ライブラリが自動的にカスタム コントロールをビルドし、さらに HTML5 メディアをサポートしないブラウザーのための Flash プレーヤーを挿入します。唯一の問題は、多くのライブラリが挿入する Flash プレーヤーは HTML5 プレーヤーに必ずしも似ていなかったり同様に機能しない場合があることです。つまり、HTML5 イベントを追加した場合、それは Flash プレーヤーでは動作せず、また追加したカスタム CSS は表示されません。

私は仕事で、スライドとナレーションが同期する HTML5 ビデオ プレーヤーを作成しました (online.dts.edu/player (英語) でデモを参照できます)。既存の 3,000 本以上の h.264 ビデオ ファイルのライブラリがあり、それを Firefox と Opera 向けに WebM に変換するのは現実的ではありませんでした。また Internet Explorer 8 などの古いブラウザーをサポートする必要がありましたが、スライドとナレーションのイベントに対応する必要があるため、別途に Flash のフォールバックする方法は使えませんでした。

これらの問題点を解決するため、先にも述べた MediaElement.js (mediaelementjs.com、英語) というプレーヤーを作成しました。これは HTML5 API にならって作成した Flash と Silverlight のプレーヤーを含む、オープンソース (MIT/GLPv2) の JavaScript ライブラリです。MediaElement.js は、まったく別の Flash プレーヤーによるのでなく、ビデオのレンダリングのみに Flash を使用し、そのビデオを HTML5 API に類似した外観の JavaScript オブジェクトでラップしています。これによって事実上すべてのブラウザーが、video タグと、ネイティブにはサポートされないコーデックを使えるようにアップグレードされることになります。jQuery を使って 1 つの h.264 ファイルを扱うプレーヤーを開始するのに必要なのは、次のコードだけです。

<video id="video1" width="640" height="360" src="video.mp4" controls></video>
<script>
jQuery(document).ready(function() {
  $("video1").mediaelementplayer();
});
</script>

video タグをサポートしないブラウザー (Internet Explorer 8 など) または h.264 をサポートしないブラウザー (Firefox および Opera) では、MediaElement.js は Flash (またはユーザーのインストール環境によっては Silverlight) を挿入し、説明した HTML5 メディアのプロパティとイベントをそれらのブラウザーで使うことができるように擬似的にアップグレードします。

オーディオをサポートするには、次のように 1 つの MP3 ファイルを使用できます。

<audio id="audio1" src="audio.mp3" controls></audio>

または、次のように 1 つの Ogg/Vorbis ファイルを使うことも可能です。

<audio id="audio1" src="audio.oga" controls></audio>

繰り返しになりますが、audio タグをサポートしないブラウザー (Internet Explorer 8) または Ogg/Vorbis をサポートしないブラウザー (Internet Explorer 9+ および Safari) では、MediaElement.js は、ブラウザーがコーデックをネイティブでサポートしているかのように動作するよう擬似的にアップグレードします (注: Ogg/Vorbis はモバイル デバイスでは再生されません)。

MediaElement.js は track 要素もサポートし、また JavaScript API を実装するブラウザー向けに全画面表示モードをネイティブにサポートします。開発者は独自の HTML5 イベントを追加したり、プロパティを追跡することができ、それはすべてのブラウザーとモバイル デバイスで動作します。

HTML5 の video 要素と audio 要素は、多少のコツは要しますが、特に紹介したような優れたライブラリと併せて活用することによって、既存の Web サイトに容易に追加することが可能であり、今後のプロジェクトではこれを既定として使うべきであることがご理解いただければさいわいです。

John Dyer は Dallas 神学校 (dts.edu) で Web 開発を担当しているディレクターです。彼のブログは j.hn (英語) で参照できます。

この記事のレビューに協力してくれた技術スタッフの John Hrvatin と Brandon Satrom に心より感謝いたします。