IE9でHTML5 videoが表示されない

Web制作者の仇敵IE様は今日も元気に制作者の首をしめてきます。
今回は制作したサイトでIE9でだけvideoが表示されないというもの。

前提条件として先に

  1. <!DOCTYPE html>されている? Y/N
  2. IE9が互換表示されている?(F12の開発ツールで IE9 standardを確認) Y/N
  3. consoleで [ document.getElementsByTagName(“video”)[0].error.code ] を実行させて、”Unable to get value of the property ‘code’: object is null or undefined”がでることを確認できる? Y/N
  4. Networkタブで動画のファイルを読み込んでいる? Y/N

3番目で違う物が出た場合はmp4のエンコードがオカシイ場合があるので再エンコードで治る可能性があります。

そして今回は上記は全て大丈夫だけど表示されなかったっていうお話。
(動画エリアで右クリックした場合、再生等のコンテキストメニューに変わるのだけど、コントローラーが表示されない)
具体的に言うと一度ブロックを非表示にしたものを表示した場合の不具合の気がする。

今回の使用していたソース。

<video id="player1" controls="controls" preload="none" width="640" height="360">
  <source src="./movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="./movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' />
  <source src="./movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
  Video tag not supported. Download the video <a href="./movie.webm">here.
<video>

IE9でのvideo注意点

  • preload=”auto”では、posterで指定した画像が動画で上書きされて表示されない
  • codecsの記述次第ではie9は対応していないことがある。こちら参照

治したい現象

videoタグだけを記述したTESTページでは、マウスオーバーでコントローラーが表示される。
しかし一度display:hiddenした内容の再表示(タブみたいなの)を行うとマウスオーバでコントローラーが表示されなくなる。
(この状態では右クリックのコンテキストメニューで操作は可能)

というか真っ白フェードイン動画と真っ白背景とIE9が産んだ奇跡の不具合コラボ。
もうIE滅べ。

解決方法

videoタグにposterを設定すると解決する。

<video id="player1" controls="controls" preload="none" poster="poster.gif" width="640" height="360">

この際にはpreloadは必ずnoneにしないといけないのはIE9様の仕様。
何かの助けになれば幸いデース。

“IE9でHTML5 videoが表示されない” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です