Html HTML5 视频的图像占位符回退
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14616453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image placeholder fallback for HTML5 Video
提问by stebesplace
I'm using the following code to implement an HTML5 video on a page
我正在使用以下代码在页面上实现 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>
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.
这很好用，嵌入在我的 FF、Safari 和 Chrome 页面上。我想要什么，因为这个视频没有控件，并且意味着嵌入在没有边框的页面中（视频中的白色BG）是用图像代替视频。
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.
如果视频无法使用该元素呈现，我希望将图像作为后备。我看过以下帖子：开始讨论的html5 video fallback advisor (no flash)。但不确定这些答案是否是我所需要的。
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.
我的直觉告诉我，我可以让 JQuery 检测视频功能，如果不支持视频，则写出一些显示图像的 HTML。但我想看看是否有可以更简单的东西。
回答by stebesplace
After a lot of searching, I found the solution that worked for me back to IE8. Have not tested in IE7.
经过大量搜索，我找到了对我有用的解决方案回到 IE8。没有在IE7中测试过。
How can I display an image if browser does not support HTML5's <video> tag
如果浏览器不支持 HTML5 的 <video> 标签，我如何显示图像
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>
回答by user1878874
The IE7 browser does not supports Video Element. We have to write Fall back code for video tag. Here is my code :)
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>
