HTML5视频的图片占位符后备广告

Question

我正在使用以下代码在页面上实现HTML5视频

<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>

这很好用,嵌入在FF,Safari和Chrome的页面上.我喜欢什么,因为这个视频没有控制,并且意味着嵌入在没有边框的页面中(视频中的白色BG)是要有一个图像代替视频.

如果无法使用元素渲染视频,我想将图像作为后备.我看过以下帖子:html5视频后备建议(没有闪存)开始讨论.但不确定这些答案是否是我所需要的.

我的直觉告诉我,我可以让JQuery检测视频功能,如果不支持视频,那么写出一些显示图像的HTML.但是我想看看是否有更简单的东西.

Answer 1

经过大量的搜索,我找到了适合我的IE8解决方案.尚未在IE7中测试过.

如果浏览器不支持HTML5的<video>标记,如何显示图像

上面的帖子显示了一种似乎对我有用的方法.这是基于我上面代码的输出:

<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>