Menu
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.
492
Video fallback, also known as waterfall or client-side mediation, maximizes the likelihood of filling an impression opportunity when you're using VAST redirects. With fallback, Ad Manager determines the eligibility of ads, ranks them accordingly, and returns a slate of ads, rather than just one.
Definition of "Fallback Content" in HTML5 Editor's Draft Embedded content elements can have fallback content: content that is to be used when the external resource cannot be used (e.g. because it is of an unsupported format). The element definitions state what the fallback is, if any.
Place your image in a container (it might already be in one). Make the container have the same width and height as the image. Set the fallback image as the background image of the container. Set the remote image as the background image of your img tag.
There is a simple video attribute that allows the use of pre-loaded images. The "poster" attribute defines a poster image that is in place of the video. Show activity on this post. The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With