| ブログトップ | HTML関連 | JavaScript関連 |

MP4(H.264)の動画でクロスブラウザ

メモ

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

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

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

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

IE8でHTML5のvideoタグを使う方法 - [Swb:]渋谷に住むWEBデザイナの備忘録

やり方はとにかく簡単!

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

これだけ。

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

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

  • IE8・IE9
  • Firefox
  • Chrome
  • Safari(Windows・Mac・iPad・iPod touch)
  • Androidのブラウザ

このエントリーをはてなブックマークに追加

LINEで送る

トラックバック

トラックバックURL

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記