html5mediaでIE6,7,8でもHTML5で動画再生

これまでPCサイトでの動画再生といえばFLVが主流。

がしかし、iPhone iPadではFlash非対応で再生できない。ジョブズも時代はHTML5だと頑なにFlashを拒否してたのは周知の通り。

そんなこんなで時代の流れは脱Flashへと向かう中、アタクシ自身もかなり以前からFlash嫌いだったこともあって、Webでの動画再生はHTML5でやりたい。


そうなると次なる問題は、Flash以上にいかんともしがたい IE6,7,8
HTML5をまったく理解しないアホブラウザどもだ。
IEを抹殺しない限り地球に平和は訪れないとすら思える。


しかし時代はあっさりこの問題もクリアしてしまった。
html5media HTML5 video and audio tags in all major browsers
これで、IE6-8でも問題なくHTML5のvideoタグを使って動画を再生できる。

ダウンロード
Downloads for etianen’s html5media – GitHub
※zipファイルはソース一式とサンプル入り
<script src="/path/to/html5media.min.js"></script>
html5media.min.jsを読み込み
あとはこんな感じで、videoタグを使って普通にHTML5で書くだけ。

<video  width="500" height="350" autoplay>
<source src="media/video.mp4"></source>
<source src="media/video.ogv"></source>
</video>

必要なら .htaccessに以下を書いて同階層に置いてサーバ設定を追記

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
たったこれだけ、基本的にはhtml5media.min.jsを読み込ますだけでOK。

動画ファイルは、mp4(H.264)とogvの2種類を用意する必要がある。
大人の事情によりwebmという形式も抑えておけばほぼ完璧のようだ。


ogvやwebmなど動画のエンコードは、Miro Video Converterが良さそう。オープンソースなので無料で使える。
Miro Video Converter FREE –
ただ変換するだけのアプリで使い方は簡単。



jQuery 1.7でIE上でのHTML5も対応が向上して問題が無くなったようで、
HTML5.jsなどIE対応用のHTML5ライブラリを組み合わせれば、IE恐るるに足らず。

そろそろHTML5を使ったWeb制作も本格的に広がりそうだ。

You might also like