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>

这在我的页面上在Firefox、Safari和Chrome中都能很好地嵌入。由于此视频没有控件，并且意味着将被嵌入到没有边框的页面中（视频中有白色背景），因此我希望在视频位置显示一个图像。

如果无法使用<video>元素渲染视频，我想要一个图像作为回退。我看到了下面的帖子：html5 video fallback advice (no flash)，它引发了讨论。但不确定那些答案是否是我需要的。

我直觉告诉我我可以使用jQuery检测视频功能，如果不支持视频，则编写一些HTML以显示图像。但我想看看是否有更简单的方法。

- stebesplace

---

可能是如何在浏览器不支持HTML5的<video>标签时显示图像的重复问题。 - Sheridan

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>

- stebesplace

Answer 2

IE7浏览器不支持视频元素。我们必须为视频标签编写备用代码。这是我的代码 :)

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

- user1878874

---

来自未来的问候，IE 现在支持 video 标签了。http://caniuse.com/#feat=video - Kalle H. Väravas

未来问候，IE现已被弃用。 - marsidev