HTML5视频的图像占位符回退

我正在使用以下代码在页面上实现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 video fallback advice (no flash)开始讨论。但不知道这些答案是我需要的。

我的直觉告诉我，我可以让JQuery检测视频功能，如果不支持视频，那么请写出一些显示图像的HTML。但是我正在寻找一些可能会更简单的东西。

解决方法

经过大量的搜索，我发现这个解决方案可以让我回到IE8。没有在IE7测试。

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

上面的帖子显示了一种似乎适用于我的方法。这是基于我上面的代码的输出：

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

原文地址：https://www.jb51.cc/html5/169235.html