HTML5 video img poster not showing in IE

Question

I have a little problem - I have HTML5 video on my site, it works fine in FF, Chrome, Safari. However, it only shows videos in IE if I set autoplay = "autoplay". Somehow he doesn’t show the img poster - you can see it here, http://test.jsworldmedia.com/ Just click See Video. Does anyone know what is wrong?

The code:

<video id="videoContainer" width="932" height="524" controls="controls" poster="/media/13037/big_buck_bunny_poster.jpg"> <source src="http://test.jsworldmedia.com/media/13010/big_buck_bunny.mp4" type="video/mp4" /> <source src="http://test.jsworldmedia.com/media/13555/big_buck_bunny.ogv" type="video/ogg" /> <source src="http://test.jsworldmedia.com/media/13034/big_buck_bunny.webm" type="video/webm" /> <object id="flash_fallback_1" class="vjs-flash-fallback" width="932" height="524" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value="config={'playlist':['http://test.jsworldmedia.com/media/13037/big_buck_bunny_poster.jpg', {'url': 'http://test.jsworldmedia.com/media/13010/big_buck_bunny.mp4','autoPlay':false,'autoBuffering':true}]}" /> <img src="http://test.jsworldmedia.com/media/13037/big_buck_bunny_poster.jpg" width="932" height="542" alt="" title="No video playback capabilities." /> </object> </video> 

Answer 1

IE9 overwrites the poster image if some video is downloaded, which is the default. If you add the attribute preload="none" , the poster image will work in IE9.

Not ideal.

edit I wrote about this and also published a bug report with W3C, since I think it is necessary for the change.

Answer 2

I found the poster attribute is too inconsistent. For me, preload="none" only fixed IE 9 problem.

You better edit the video so that the poster image is the first frame of your video.

I am a big fan of this video for everyone , which shows exactly how to implement the html5 <video> with backups. The author specifically talks about the poster attribute, referring to inconsistent support and a major bug in iOS 3.x as reasons for encoding the poster image in the first frame of your video.

You can also check out VideoJs , which will handle many cross-browser issues.

EDIT (2012-11-04): VideoJs may not be a good option, the main issues reported in IE 9.

Answer 3

I had the same problem. I did the following to make the poster work in IE8 and IE9.

In the html file, add the image below the video element with a poster like src:

 <img id="video-poster" width="460px" height="260px" src="img/video_poster.jpg"> 

In the css file add:

 #video-poster {position: absolute; z-index: 600; display: none;}` 

Note that the parent element must have in css position: relative

In the JS file add:

 /** * fix the following issue: "video preview not showing properly on IE8 and IE9" */ (function ($) { var browserIEInfo = navigator.userAgent.match(/MSIE (([0-9]+)(\.[0-9]+)?)/); if (browserIEInfo === null || parseInt(browserIEInfo[2]) > 9){ return; } if (parseInt(browserIEInfo[2]) < 9 && !isFlashSupported()) { return; } var video = $('video'); // use element id if there is more than 1 video var videoPoster = $('#video-poster'); $( window ).resize(function() { fixVideoCoverPosition(); }); fixVideoCoverPosition(); videoPoster.show(); videoPoster.click(function() { video.get(0).play() }); video.on('playing', function() { videoPoster.hide(); }); video.on('ended', function() { videoPoster.show(); }); function isFlashSupported() { var hasFlash = false; try { new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); } catch (e) { var mimeTypes = navigator.mimeTypes; if (mimeTypes && mimeTypes['application/x-shockwave-flash'] !== undefined && mimeTypes['application/x-shockwave-flash']['enabledPlugin'] ) { hasFlash = true; } } return hasFlash; } function fixVideoCoverPosition() { var videoPosition = video.position(); video.width(); $('#video-poster').css({ top: videoPosition.top, left: videoPosition.left, width: video.width(), height: video.height() }); } }(jQuery));