皆さん。こんにちわ。@kouhei_mitsuyaです。
今回はHTML5の新要素として注目されている[Video]について書いていきます。この要素は名前の通り動画の再生が外部のプラグイン[Flash]や[Silverlight]を使用しなくても実現できるという大変優れたのもです。
HTML5では任意の[動画]や[音声]を埋め込むタグが追加されています。
Videoタグの使い方
Videoタグの使い方もとてもシンプルで<video src="dummy.mp4"></video>
と、まるでimgタグを使用する感覚で実装できます。
またvideoタグにcontrols属性を追加すると一時停止やボリュームのコントローラーをブラウザが自動で表示させます。
<video src="dummy.mp4" controls></video>
その他[autoplay]を追加させることでページを読み込んだと同時に自動再生
<video src="sample.mp4" autoplay></video>
この他にもHTMLMediaElementインタフェースを利用すれば動画や音声にに対してさらに細かいコントローラーを指定することが可能です。
採用されているコーデックの違い
しかしブラウザによってvideo要素の採用されているコーデックの違いがあり【H.264】にはChrome,Safariが対応し【Ogg/Theora】にはFirefox,Opera,Chromeが対応となっています。※IEはHTML5に対応するプラグインChrome Frameで対応可能になります。このように現時点では各ブラウザによって再生できる形式が違っているので下記の様に複数のソースを指定し、各ブラウザで実装できるように対応する必要があります。
<video src="dummy.mp4"></video> <video src="dummy.ogv"></video>
ブラウザでのコーデックの違いなどまだまだ実際に使うとなると課題も多く残りますが、HTML5が正式に勧告され(2012年3月予定)それらが解消された際にはこれまでの外部プラグインは必要なくなり、とてもシンプルなコードで動画や音声を表現できるようになりそうです。
