Win7 IE11でvideoタグ埋め込み動画mp4ファイルが再生されない対処法

Windows7でIE11という環境下でhtml5のvideoタグで埋め込んだ動画が再生されない事案が発生しました。この時点でWindows7のchromeとfirefoxではしっかりと再生確認ができました。

というわけでWin7とIE11で埋め込み動画をvideoタグで再生させる方法を備忘録としてまとめましたので参考にしてみてください。

html5mediaを使う

古いIEではvideoタグをサポートしていませんが、html5mediaを使えばFlashプレーヤーとして動画を再生できる状態にしてくれます。導入は簡単で、javascriptを読み込むだけ。

<script src="//api.html5media.info/1.2.2/html5media.min.js"></script>

最新版はhttps://html5media.info/にありますので、これをコピペしてhead内に貼り付ければ終了。私は色々と試行錯誤して最終的にhtml5mediaを入れて動くようになったので、まずはこれを紹介しておきます。

htaccessにビデオ形式を記述する

videoタグを記述しているhtmlファイルを置いてあるディレクトリにhtaccessファイルを設置します。htaccessに記述する内容は

AddType video/ogg .ogg .ogv
AddType video/mp4 .mp4
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv

となります。htaccessファイルを作って上記をコピペしてhtmlファイルのあるディレクトにアップすればOKです。

ちなみに、私は何も考えずやっていましたが、htmlファイルがutf-8で書かれている場合、htaccessファイルもutf-8で保存したことで再生することができた事例を見つけました。もしhtaccessファイルをアップしても変化がない場合は文字コードを見直してみてください。

複数の再生方式を提示してあげる

複数のブラウザに対応するために、ただvideoタグを入れるだけでなく、いくつかの環境下でダメな次の方式で再生を試みる、という動作をさせるため、以下の記述をする必要があります。

<video src="動画ファイル名.mp4" width="640" height="360" controls>
<source src="動画ファイル名.mp4" type="video/mp4">
<source src="動画ファイル名.ogg" type="video/ogg">
<source src="動画ファイル名.webm" type="video/webm">
<embed src="動画ファイル名.mp4" width="640" height="360" autoplay="false" controls>
</video>

これで、上から順々に再生方法を試していき、その環境下で再生できる方式で再生するようになります。今回のWin7 IE11の場合は最後の埋込式記述でFlash動画として再生されます。

ちなみにwebmとoggというのはmp4形式とは別の形式の動画ファイルです。もしこの時点で動画がIE11(FFでも同様に)で再生できなければ、次の項目でこれらについて説明します。

動画の種類を複数作っておく

基本的にmp4なら大丈夫だと思うのですが、念のためにwebmとoggの2種類の動画形式も用意しておくことをお薦めします。これは最後で良いと思います。ここまでの対策をしてみて動画が再生できない場合は、2種類の形式の動画を変換して用意しましょう。