HTML 5 の <video>

2009年8月4日 火曜日

最初に…このエントリーの demo は Firefox 3.5 で閲覧すると快適です。

HTML 5 で新たに登場する予定の要素の一つに video 要素があります。video 要素は img 要素で画像を埋め込む感覚で、HTML に動画を埋め込むことができる要素です。

video 要素は HTML 5 の要素であり、DOM を構成する一要素なので…

• プラグインなしで動作する
• JS などでコントロールできる
• CSS でスタイルを与えることができる

といったメリットがあります。Flash (FLV) ではなく video 要素を使うのには意味があるのです !!

現段階では Safari 3.1 以降 (iPhone, iPod Touch 含む)、Chrome 3 β、Firefox 3.5 で実装済みなものの、Safari (H.264 をサポート) と Mozilla (Ogg をサポート) の両者でサポートをするコーデックが違うため現状では 2つのファイルを用意しなくてはけないけません。(Windows Safari の場合は QuickTime がインストールされている必要があります) ちなみに Chrome 3 βはどちらのコーデックにも対応しています。

これは img 要素において、safari は gif しか使えない、Fx は png しか使えない というようなものです。

HTML 5 の草案から Ogg への言及が外れた背景には、Ogg が DRM をサポートしていない (著作権保護ができない) という理由で Apple と Nokia の反対があったようです。via Removal of Ogg Vorbis and Theora from HTML5: an outrageous disaster 窶鐀 Rudd-O.com (でもそれは建て前で Ogg がスタンダードになったら Apple としては mov, mp4 の立場が…みたいな理由かなとも思いますが。)

現状の Webkit, Firefox 3.5 で video 要素を再生するには次の様に記述します。

<video width="320" height="240">
	<source src="video.ogg" type="video/ogg"><!-- for Mozilla -->
	<source src="video.mp4" type="video/mp4"><!-- for Webkit -->
	<p>ここに代替内容</p>
</video>

• demo (Fx 3.5, Webkit 用)

source 要素を 2つ用意することで、Ogg が再生できなかったら mp4 を再生します。

OPERA に関しては、OPERA Lab からダウンロードできる Opera 9.62 Video, 3D canvas and File I/O build (試験的なビルドで正式版ではない) で Video 要素が動作します。 source 要素には対応していないので

<video src="video.ogg" type="video/ogg" width="320" height="240"></video>

のように src 属性で Ogg を読み込むことで動作します。

• demo (Opera 9.62 Video, 3D canvas and File I/O build, Fx 3.5, Chrome 3 β 用)

しかし、現段階での OPERA 10βに video のサポートは含まれていません。OPERA も、以前は CTO のHakon(ホーコン)氏が demo で紹介するほどに video 要素と Ogg のサポートに前向きでしたが、OPERA 10 ではどうなるか謎です。(草案では src 属性、source 要素のどちらでも使えることになっています。)

IE は…情報なし (?) です。

IE と OPERA、古いバージョンの Fx はネイティブに video 要素サポートしていませんが、video4all という JS ライブラリーを使うことで video 要素を動作させることができます。ただし、これはあくまでもエミュレート用で、swf を介して表示する仕組みでなので、JS や CSS でのコントロールはできません。

video 要素に CSS を適用する

video 要素は HTML の要素なので CSS を適用することもできます。例えば transform の rotate で回転させたり、skew で歪めることもできます。

• demo (Fx3.5 以降、webkit 用)

Fx 3.5 からは HTML に SVG の CSS を適用することができるので、ぼかし、グレースケール、階調の反転やマスク効果を適用することもできます。ただしこの場合、video 要素のコントロール部分にも効果が適用されます。

• demo (Fx3.5 以降)

video 要素を script で操作する

スクリプトをつかって動画を操作することができます。その一例として…

動画を再生する

document.getElementById('video1').play();

動画を停止する

document.getElementById('video1').pause();

などがあります。

• demo (Fx 3.5 用)

頑張ればプレイヤーも作れてしまいます。location.hash を使うと操作の履歴を残すこともできて楽しいかも。

object で Ogg を読み込むと…

HTML 4.01, XHTML ファミリーでもプラグインなしで動画を埋め込みたい場合には object 要素を使うことになります。

Fx 3.5 では ogg のコーデックが使えるので、object で OGG ファイルを埋め込むことができます。ただしこの場合、video 要素と違って、コントロールはできません。また、Safari 場合も object 要素で MP4 ファイルを埋め込むことができますが、QuickTime を参照して動いているようでした。

• demo(Fx 3.5, Chrome 3 β 用)

おまけ

CSS で body:after{content:url(video.ogg);} を試してみましたができませんでした。