Why doesn't my poster image show in IE9 html5 Video

Question

I have a html5 video on this page:

http://www.yellowtulipcomms.com/portfolio/global-public-speaking/

Down the bottom of the 3 right hand images.

Im using the following code

<video class="video-js" width="235" height="185" playbackRate="1" poster="http://www.yellowtulipcomms.com/wp-content/uploads/2011/11/Kimia-Namadchi-STILL.jpg" controls="controls">

With the videos underneath and the poster image just never shows in IE9

Any ideas?

Answer 1

1. Remove the playbackRate attribute.
2. Add a preload="none" attribute

Answer 2

The Image as Background only works with the preload="none" tag but for wath ist this function? for nothing. Why Opera, Firefox, Crome... can interpret this and IE can`t do?

Why i have in every WEBpage a IF IE tag? Why i must make every thing bad to work on IE?

Thats the solution it complets the development from microsoft.

Made a Picture with the same resolution as the video and position Absolute outside of the video tag and give a id like "video_play" Now made a Function that fade the Picture out and play the video.

NOW you can use the preload function and it looks great and it works on IE without a black screen.

$("#video_play").click(function(){

    $(this).fadeOut(600);
    var video = document.getElementById("video_src");
    if (video.paused) {
       video.play();
    } else {
       video.pause();
    }

}); 

Maby you can set the Poster tag and get the attribute with javascript and made my script full dynamic. To time is very bad... like IE....

Answer 3

I had a page loading several videos, and in IE9 the poster images sometimes would appear, sometimes not. The solution was to set the poster image as a background to the video element. Worked fine.