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