HTML5 videoタグを使ってみた
盆休みも最終日ということで、晩はＴＶでも見てまったりとサザエさん症候群にどっぷりはまろうと思っていたのだが、ふと開いたページで、HTML5・css3が目に入った。
最近ではこのブログでも使わせてもらってるWordPressの投稿フォームでタグなんて打つことなく記事（ページ）を作れるのだけど、ちょっとは知っとくべきかなと、HTML5のリファレンスサイトでザッとHTML5について見ていると、videoタグがHTML5から新しく出来たみたい。
現在ウェブで動画を公開する時に使われるのが多いのはFLVだと思うが、これを見る場合フラッシュプラグインなんかを閲覧者のPCに入れてもらわなければいけなく、人によったら面倒・わからないということもある。
で、このHTML5のvideoタグを使うとプラグインのインストールなどの手間無く動画みれるそうな。ということで、HTML5のvideoタグを使って、サンプルページを作ってみた。
閲覧者からすれば手間無く動画再生できるし、サイト製作者からすればimgタグ感覚でページに埋め込めて便利なvideoタグだけど大きな問題がある。
まずは全てのブラウザがvideoタグに対応していないこと。特に大きいのはまだまだ使ってる人が多いであろう、IE7・IE8が未対応（IE9は対応してるみたい）
次に、videoタグに対応しているブラウザでも、サポートしているビデオ形式がブラウザのベンダーによって違うこと。FirefoxやGoogle ChromeがサポートするのはOgg Theora（ogv）やVP8（webm）、Internet Explorer9やSafariやGoogle ChromeがサポートするのはH.264（mp4）と、ブラウザによってサポートしてるビデオ形式がバラバラ。色々、利権やらライセンスやらでvideoタグで扱える標準のビデオ形式というのは難しいようです。
FirefoxやGoogle Chromeでも、Internet Explorer9やSafariでもvideoタグで動画を再生できるようにするには、下のようにwebm（ogv）とmp4のビデオファイルを用意して、videoタグの間にsource src="～"て感じで列挙すれば、ブラウザ側で再生可能なファイルをチョイスするみたいですね。
<video> <source src="～.webm"> <source src="～.mp4"> <source src="～.ogv"> </video>
ちなみにvideoタグ未対応のブラウザでも、videoタグで埋め込まれた動画を見れるようにするスクリプトもあるみたいですけど、そこまでは今回試してません。
複数のファイル用意する手間を考えたら、やっぱ興味も失せるし、未対応のブラウザのこと考えるとまだまだ実用的ではないなと・・・
css3の方もほんの少し試して見た。動画の周りが角丸になってるけど、あれはborder-radiusというのでしてます。今までなら画像使ってデザインしてましたが。他にもcss3でいろいろできるようになったみたいなんで暇が出来たら試してみよう。
試しにＷＰの投稿フォームでvideoタグ使ってみたら・・・Firefox6ではあっさり表示できた（未対応ブラウザでは表示できてないはず・・・やね？）
■ 追記 2012.7.15
IEでも再生できるようにスクリプトで対応。IE8で確認済み
ということで気が付けばこんな時間・・・videoタグ便利なんだけど、まだまだ諸々の問題で私なんぞには使いこなせないなあ・・・