Firefox 3.1のHTML 5対応--video要素による動画再生

杉山貴章(オングス)
2008-09-16 12:11:01
  • このエントリーをはてなブックマークに追加

source要素によるコーデックの指定

前回示したvideo要素の使用例では、video要素そのもののsrc属性を使用して埋め込む動画ファイルを指定していた。これに対して、コーデックやメディアの種類を明示的に指定したい場合には、videoの子要素であるsource要素を利用すればよい。

source要素ではsrc属性で動画ファイルのパスを、type属性でMIMEタイプやコーデックを、media属性でメディアのタイプを指定する。この場合、リスト1で示すように、ひとつのvideo要素に対して複数のsource要素を指定することが可能。これによりブラウザが対応するコーデックによって提供するメディアファイルを変えるというようなことが可能になる。なおvideo要素のposter属性には、動画が再生できない場合に表示する画像ファイルを指定する。

リスト1 sourceタグでメディアのコーデックを指定


この例ではMP4、3GP、Theoraの3つのメディアを用意している。ただし、WHATWGが公開しているHTML 5仕様のドラフトでは、リスト2のようにcodecsはtype属性に含めて指定するように記載されている。一方でFirefox 3.1の実装ではリスト1のように記述しなければ正常に動作しないので注意が必要だ。

リスト2 HTML 5仕様のドラフトに示されているtype属性の指定方法


このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]