Firefox 3.1のHTML 5対応--video/audio要素のサポート
本連載では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 動画の上に再生ボタンが表示される
図2 再生中は、動画上にマウスカーソルを合わせると停止ボタンが出る
※ブラウザで表示を確認する
JavaScriptで再生/停止ボタンを実装する
- 1人の推薦記事
- 1人がクリップ
-
ソーシャルブックマーク(-)
- トラックバック(0)
-
- タグ
- コントロール
- 実装
- ウェブページ
- ローカル
- ドラフト
- コンテンツ
- ファイル
- video
- サブインタフェース
- HTMLMediaElement
- 定義
- HTMLVideoElement
- Wikipedia Foundation
- 動画コンテンツ
- play()メソッド
- play()
- pause()メソッド
- pause()
- 一時停止
- 一時停止ボタン
- 再生ボタン
- インタラクティブコンテンツ
- controls
- controls°
- imgタグ
- src°
- videoタグ
- 埋め込み
- nightly build
- audio要素
- 演奏
- Wikimedia
- コントロールボタン
- 記述
- video/audio要素
- 記述方法
- video要素
- Vorbis
- Theora
- Chris Double
- コーデック
- audio
- HTMLファイル
- オーディオ
- video/audio
- 要素
- フォーマット
- 再生
- 対応
- 特集: 開発者のFirefox 3 (69件)
- ホワイトペーパー
- 企画特集
【徹底対談】運用管理ツールの賢い使い方
インターネット上の悪意を未然に防ぐには?
御社のログ活用しませんか!?
セキュリティ&ユーザ事例【SIer Club】
今注目の「サジェスト検索」−デモ掲載中
ロリポップ!がリニューアル
◆エン・ジャパン厳選求人☆毎週更新◆
仮想環境を実現するソリューション特集
中小企業のセキュリティリスクとは?
SOA、BPM、SaaS −今、企業に必要なこと
パンデミック対策特集
ストレージメディア特設サイト開設
集積度も性能も、業界最高水準のブレードPC
そのストレージで仮想化に対応できますか?
ESBでIT投資の無駄を劇的に解消する
- エンタープライズにおけるSUSEの強み
- サービス・ドリヴン・データセンター
- サーバー監視・運用のコストを削減するには
- ■ストレージ容量50%削減保証■
- 話題のタグ
Windows 7はLinuxへの切替が簡単:注目の仮想ディスクフォーマット「VHD」
iPhone OS 3.0で変わった「絵文字」
OSSのクラウド基盤「Eucalyptus」を使う(4)--インストール〜ノード構築
俳優経験者が指南する「人前で上手く話すためのティップス10選」
「うるまでるびペイント」登場:絵は上手下手ではなく制作過程に楽しみが
待てば回路の日和あり--「iPhone 3GS」発売、しかし――