MP4（H.264）の動画でクロスブラウザ

nandani

12年前

メモ

MP4（H.264）動画をHTMLに埋め込む場合、下記のようにvideoタグで埋め込むことになるかと思います。

<video src="video.mp4" width="320" height="200" controls preload></video>

が、ブラウザによってはH.264をサポートしていなかったり（Firefox）、そもそもvideoタグが利用できなかったり（IE8）で、結局はそれぞれのブラウザ用の動画を用意したり、タグを振り分ける必要がありました。

しかし、それを一気に解決する方法がこちらのサイトに書かれておりました。

やり方はとにかく簡単！

スクリプトをダウンロード＆解凍。
apiフォルダのみサーバに丸ごとアップロード。
head内に<script src="（apiフォルダのアップロード先）/html5media.min.js"></script>を記述。
普通にvideoタグを書く。<video src="video.mp4" width="320" height="200" controls preload></video>

これだけ。

これでIE8、Firefoxでも再生可能となりました。

もともと再生可能なブラウザもありますが、以下のブラウザで再生が確認されました。