Help with mediaelement.js player's 'poster' image in IE8

JavaScript
1

I have tried other players and am now testing the mediaelement.js player, which works in all browsers, playing the video, and shows the ‘poster’ image in all browsers, except no ‘poster’ image appears in IE8.
As I know the "poster’ isn’t supported by IE8, I’m looking for help with a work-around to place a thumbnail image as a substitute for the ‘poster’ image. Any help will be appreciated. Here’s my current code:

<video id="video" poster="http://www.-domain-.com/img/testImage.jpg" preload="none" controls="controls" width="240" height="220" >
<source type="video/mp4" src="http://www.-domain-.com/video/testVideo.mp4"/>
<object width="240" height="220" type="application/x-shockwave-flash" data="http://www.-domain-.com/mediaelement/flashmediaelement.swf">
 <param name="movie" value="http://www.-domain-.com/mediaelement/flashmediaelement.swf"     />    
<param name="flashvars" value="controls=true&file=http://www.-domain-.com/video/testVideo.mp4" />
<!-- Image as a last resort -->
<img src="http://www.-domain-.com/img/testImage.jpg" width="240" height="220" title="No video playback capabilities" />
</object>
</video>
2

You should be able to do what they do in the Video for Everybody code, which is:

<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />

IE8 is using the Flash video fallback, and it looks like IE8 gets the poster image from that line you see above with “POSTER.JPG” in the query string. I haven’t tested this recently, but I’m pretty sure I’ve done this in the past (and I’ve written about it) and it should work in IE8.

3

Thanks a lot for your reply. Much appreciated.
However, when I tried this code it still did not show the thumbnail image in IE8:
Any additional help will be appreciated.

<video id="video" poster="http://www.-domain-.com/img/testImage.jpg" preload="none" controls="controls" width="240" height="220" >
<source type="video/mp4" src="http://www.-domain-.com/video/testVideo.mp4"/>
<object width="240" height="220" type="application/x-shockwave-flash" data="http://www.-domain-.com/mediaelement/flashmediaelement.swf">
<param name="movie" value="http://www.-domain-.com/mediaelement/flashmediaelement.swf" />    
<param name="flashvars" value="controlbar=over&amp;image=http://www.-domain-.com/img/testImage.jpg&amp;file=http://www.-domain-.com/video/testVideo.mp4" />
<param name="flashvars" value="controls=true&file=http://www.-domain-.com/video/testVideo.mp4" />
 <!-- Image as a last resort -->
<img src="http://www.-domain-.com/img/testImage.jpg" width="240" height="220" title="No video playback capabilities" />
</object>
</video>
4

I think you need to combine the two param elements that use the “flashvars” attribute. You shouldn’t have two of those. So do this:

<video id="video" poster="http://www.-domain-.com/img/testImage.jpg" preload="none" controls="controls" width="240" height="220" >
<source type="video/mp4" src="http://www.-domain-.com/video/testVideo.mp4"/>
<object width="240" height="220" type="application/x-shockwave-flash" data="http://www.-domain-.com/mediaelement/flashmediaelement.swf">
<param name="movie" value="http://www.-domain-.com/mediaelement/flashmediaelement.swf" />    
<param name="flashvars" value="controls=true&amp;file=http://www.-domain-.com/video/testVideo.mp4&amp;controlbar=over&amp;image=http://www.-domain-.com/img/testImage.jpg&amp;file=http://www.-domain-.com/video/testVideo.mp4" />
 <!-- Image as a last resort -->
<img src="http://www.-domain-.com/img/testImage.jpg" width="240" height="220" title="No video playback capabilities" />

Not sure if that will fix it, but that’s the first thing I noticed that’s different from the VFE page I linked to earlier.

5

Thanks so much for taking the time to provide another suggestion. Greatly appreciated, however, the image does not appear in IE8 with your suggestion. Any other ideas/solutions will be appreciated.

6

Hmm… that’s strange. What exactly happens in IE8? Does the video show a different frame of the video?

The only other suggestion I have is that you copy the entire VFE code and use that, just to see if it works (changing the values where necessary). If that works, then maybe it’s something in your code.

Since I can’t test on IE8, then I can’t really help you further, but I would be interested to know if the poster image can be shown to IE8.

7

Thanks again for your reply. I tried this code from VideoForEverybody, still no image appears in IE8. Any additional help will be appreciated:

<video controls="controls" poster="http://www.-domain-.com/img/testImage.jpg" width="140" height="120">
<source src="http://www.-domain-.com/video/testVideo.mp4"  type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://www.-domain-.com/mediaelement/flashmediaelement.swf" width="140" height="120" >
<param name="movie" value="http://www.-domain-.com/mediaelement/flashmediaelement.swf" />
<param name="flashvars" value="controlbar=over&amp;image=http://www.-domain-.com/img/testImage.jpg&amp;file=http://www.-domain-.com/video/testVideo.mp4" />
 <img src="http://www.-domain-.com/img/testImage.jpg" width="140" height="120"  alt="TEST"
 title="No video playback capabilities, please download the video below" />
</object>
</video>
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.