videoタグでmp4動画をサイトに埋め込む方法の記事でも紹介させていただきましたが、
videoタグによる動画の埋め込みはWindowsのIE8だと非対応なので、今回はhtml5media.jsというJavascriptライブラリを使ってIE6〜8のブラウザでもvideoタグに対応させる方法を紹介させていただきます。
html5media.jsのダウンロード
以下のサイトから html5media.jsをダウンロードします。>HTML5 video and audio tags in all major browsers
html5media.jsは、HTML5に対応していないIE8のようなブラウザの場合に、videoタグによる動画をFlashプレーヤーのflowplayer で再生させるというライブラリです。
IE8に限った対応の場合は以下のようにしておきます。
|
1 2 3 |
<!--[if lte IE 8.0]> <script src="http://api.html5media.info/1.1.8/html5media.min.js"></script> <![endif]--> |
あとは前回の記事でも紹介させていただいたvideoタグによる動画の埋め込み方法と同じですので、動画を再生させたい場所に以下のような記述を行います。
|
1 2 3 4 5 6 |
<video src="sample.mp4" width="640" height="360" poster="sample.jpg" controls preload> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <source src="sample.webm" type="video/webm"> <p>ご利用のブラウザはvideoタグによる動画の再生に対応していません。</p> </video> |
必要に応じて.htaccessにMIMEタイプの追加を行っておきます。
|
1 2 3 4 5 |
AddType video/ogg .ogg .ogv AddType audio/ogg .ogg AddType application/ogg .ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm |
以下にhtml5media.jsを使ったデモを設置しましたので、IE8をご利用の場合は挙動を確認してみてください。
html5media.js を使ったIE8 向けvideoタグ対応のデモ
コメント