Firefox 3.1のHTML 5対応--video/audio要素のサポート

杉山貴章（オングス）
2008/09/08 14:52

本連載ではFirefox 3.1におけるHTML 5対応を紹介してきたが、今回は目玉機能のひとつであるvideo/audio要素のサポートについて解説する。

HTML 5のマルチメディアサポート

　Firefox 3.1における新機能の目玉のひとつが、HTML 5で定義されているvideo要素およびaudio要素のサポートだろう。

　現状、ウェブページに埋め込まれた動画やオーディオの再生はプラグインを利用することで行っているため、HTMLファイルへの記述方法はコンテンツのフォーマットごとに異なっている。video/audio要素のサポートによって、任意のフォーマットのコンテンツを共通の方法で埋め込むことができるようになる。

　HTML 5のドラフトでは、特定のフォーマットとコーデックを優先するかどうかについて言及されていない。しかし、Firefoxで該当機能を担当しているChris Double氏は、7月31日に自身のブログで、FirefoxそのものにTheoraおよびVorbisのサポートが追加されたことを明らかにしている。

　これにより、Firefox 3.1では自身がデフォルトで持つ実装によってvideo要素によるTheora＋Vorbisの演奏、およびaudio要素によるVorbisの演奏が行えるようになる。

　同機能はすでにFirefox 3.1のnightly buildにマージされている。今回はこれを利用してvideo要素による動画の再生を試してみたい。

video要素による動画の埋め込み

　まず、<video>タグの基本的な使い方はリスト1のようになっている。埋め込みたい動画のファイルをsrc属性で指定するだけだ。使い勝手は<img>タグによく似ており、非常にシンプル。controls属性を付けることによってインタラクティブコンテンツ扱いになり、画面上に再生ボタンや一時停止ボタンが表示されるようになる。

リスト1 videoタグでTheora動画を埋め込む

    <video controls src="video.ogg" id="sampleVideo"></video>

　<video>タグを利用した完全なHTMLのソースをリスト2.2に示す。この例では、ローカルにあるファイルではなく、インターネット上で公開されている動画を埋め込んでいる。これをブラウザで表示すると、図1、図2のように動画がコントロールボタンと共に表示される。

リスト2 Wikimedia上の動画を再生

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <title>videoタグの使用例</title>
  </head>

  <body>

    <h1>videoタグの使用例</h1>

    <video controls 
	   src="http://upload.wikimedia.org/wikipedia/commons/d/d6/Victoria_falls.ogg" 
	   id="sampleVideo"></video>

  </body>
</html>
図1 動画の上に再生ボタンが表示される 図1 動画の上に再生ボタンが表示される
図2 再生中は、動画上にマウスカーソルを合わせると停止ボタンが出る 図2 再生中は、動画上にマウスカーソルを合わせると停止ボタンが出る
※ブラウザで表示を確認する

JavaScriptで再生／停止ボタンを実装する

記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Ajax Flash RIA Chrome 開発環境 データベース Microsoft インストール Windows Vista OS Java 小技 Webサービス JavaScript Webデザイン Windows XP マイクロソフト プログラミング言語 Firefox iPod touch Firefox 3 Google UI WebKit Windows CSS セキュリティ Mac OS X オープンソース モバイル リファレンス Mozilla ブラウザ Opera Internet Explorer iPhone 3G iPhone ソフトウェア開発 脆弱性 Windows 7 仮想化 Safari HTML Apple Tips アプリケーション Linux Database クラウド Off Topic
  • 話題のタグを見る »