CODEWITHSUNDEEP
htmlvideohtml5-video
stebesplace
stebesplace

Reputation: 1331

Image placeholder fallback for HTML5 Video

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.

Upvotes: 41

Views: 100698

Answers (2)

user1878874
user1878874

Reputation: 24

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>

Upvotes: 0

stebesplace
stebesplace

Reputation: 1331

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>

Upvotes: 70

Related Questions