我使用以下代码在页面上实现 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 视频后备建议（无 Flash） https://stackoverflow.com/questions/6576746/html5-video-fallback-advice-no-flash这引发了讨论。但不确定这些答案是否是我所需要的。
我的直觉告诉我，我可以让 JQuery 检测视频功能，如果不支持视频，则编写一些显示图像的 HTML。但我想看看是否有更简单的东西。
经过大量搜索，我找到了对 IE8 有效的解决方案。没有在IE7下测试过。
如果浏览器不支持 HTML5 的 标签，如何显示图像 https://stackoverflow.com/questions/9718109/how-can-i-display-an-image-if-browser-does-not-support-html5s-video-tag
上面的帖子展示了一种似乎对我有用的方法。这是基于我上面的代码的输出：
<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
