html5mediaでIE6,7,8でもHTML5で動画再生
これまでPCサイトでの動画再生といえばFLVが主流。
がしかし、iPhone iPadではFlash非対応で再生できない。ジョブズも時代はHTML5だと頑なにFlashを拒否してたのは周知の通り。
そんなこんなで時代の流れは脱Flashへと向かう中、アタクシ自身もかなり以前からFlash嫌いだったこともあって、Webでの動画再生はHTML5でやりたい。
そうなると次なる問題は、Flash以上にいかんともしがたい IE6,7,8
HTML5をまったく理解しないアホブラウザどもだ。
IEを抹殺しない限り地球に平和は訪れないとすら思える。
しかし時代はあっさりこの問題もクリアしてしまった。
ダウンロード
html5media.min.jsを読み込み
あとはこんな感じで、videoタグを使って普通にHTML5で書くだけ。
必要なら .htaccessに以下を書いて同階層に置いてサーバ設定を追記
たったこれだけ、基本的にはhtml5media.min.jsを読み込ますだけでOK。
動画ファイルは、mp4(H.264)とogvの2種類を用意する必要がある。
大人の事情によりwebmという形式も抑えておけばほぼ完璧のようだ。
ogvやwebmなど動画のエンコードは、Miro Video Converterが良さそう。オープンソースなので無料で使える。
jQuery 1.7でIE上でのHTML5も対応が向上して問題が無くなったようで、
HTML5.jsなどIE対応用のHTML5ライブラリを組み合わせれば、IE恐るるに足らず。
そろそろHTML5を使ったWeb制作も本格的に広がりそうだ。
がしかし、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> |
あとはこんな感じで、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 |
動画ファイルは、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制作も本格的に広がりそうだ。
