Image placeholder fallback for HTML5 Video

Question

I'm using the following code to implement an HTML5 video on a page

<video autoplay>
    <source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

This works great, embedded on my page in FF, Safari, and Chrome. What I'd like, since this video has no controls, and is mean to be embedded in the page with no borders (white BG in the video) is to have an image appear in place of the video.

I'd like to have an image as the fallback if the video can't be rendered with the element. I've seen the following post: html5 video fallback advice (no flash) which started the discussion. But not sure if those answers were what I needed.

My gut tells me that I can have JQuery detect the video capability, and if video is not supported, then write out some HTML that shows an image. But I was looking to see if there's something that could be simpler.

Answer 1

After a lot of searching, I found the solution that worked for me back to IE8. Have not tested in IE7.

How can I display an image if browser does not support HTML5's <video> tag

The above post, shows a method that seems to work for me. Here is the output based on my above code:

<video autoplay>
    <source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
    <img src="/images/product/product-parent-hero.jpg" title="Your browser does not support the <video> tag">
</video>

Answer 2

The IE7 browser does not supports Video Element. We have to write Fall back code for video tag. Here is my code :)

<video controls="controls" autoplay="autoplay" 
poster="#" width="212" height="160">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" 
    width="212" height="160">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':true}]}" />
        <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
    </object>
</video>