html5のvideoタグのクロスブラウザ対応について

1.複数のファイル形式を用意

ブラウザごとに読める動画のファイル形式が違うため、webm形式、mp4形式の動画の2形式のファイルを用意し、下記のソースコードを埋めこむ。

<video poster=”サムネイル画像名” width=”320″ controls> <source type=”video/webm” src=”動画.webm”> <source type=”video/mp4″ src=”動画.mp4″> </video>

2.旧ブラウザへの対応

IE8など、html5非対応のブラウザへの対策として、下記ページで紹介されてたJSをheadタグ内で読み込む http://d.hatena.ne.jp/susan-style/20111205/1323056844 ※自動でFLV形式として再生するスクリプトです。

3.サーバー設定の変更

サーバーの.htaccessに下記1行を追記する。 AddType video/webm .webm ※一部の形式の動画は、サーバのデフォルト設定では再生できないことがあるためです。

This website stores cookies on your computer. These cookies are used to provide a more personalized experience and to track your whereabouts around our website in compliance with the European General Data Protection Regulation. If you decide to to opt-out of any future tracking, a cookie will be setup in your browser to remember this choice for one year.

Accept or Deny