HTML5 视频的图像占位符回退 [英] Image placeholder fallback for HTML5 Video
问题描述
我正在使用以下代码在页面上实现 HTML5 视频
I'm using the following code to implement an HTML5 video on a page
<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)是用图像代替视频.
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.
如果视频无法使用该元素呈现，我希望将图像作为后备.我看过以下帖子:html5 视频后备建议(无闪光灯)这开始了讨论.但不确定这些答案是否是我需要的.
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.
我的直觉告诉我，我可以让 JQuery 检测视频功能，如果不支持视频，则写出一些显示图像的 HTML.但我想看看是否有更简单的东西.
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.
推荐答案
经过大量搜索，我找到了对我有用的解决方案回到 IE8.未在 IE7 中测试.
After a lot of searching, I found the solution that worked for me back to IE8. Have not tested in IE7.
如何如果浏览器不支持 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>
这篇关于HTML5 视频的图像占位符回退的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
