| ブログトップ | 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のブラウザ
日々の生活にhappyをプラスする|ハピタス

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

LINEで送る

トラックバック

トラックバックURL

コメント一覧

1. Posted by ブランドコピー   2017年07月23日

100%品質保証!満足保障!
商品数も大幅に増え、品質も大自信です
ブランドバッグ ブランドコピー,ブランドコピーブランド販売
最高品質のアイテムアウトレットクリアランス販売
品質がよい 価格が低い 実物写真 品質を重視
ご注文を期待しています!

2. Posted by コーチ サングラス   2017年08月01日

2017年新素材入荷!
2017年最高新時計大量入荷
特級.品質 シリアル付きも有り 付属品完備!
100%品質保証 !満足保障100%!
経営方針:現物写真、品質を重視、納期も厳守、信用第1!
広大な客を歓迎してご光臨!

コメントする

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

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