Question

我正在寻找一种创造性的方法，在一些情况下用图像替换HTML5视频。不想处理闪光灯或任何类似的东西来使视频工作...宁愿给他们一个图像。

如果出现以下情况，请给他们提供图片：

如果桌面浏览器不支持HTML5视频
如果用户是移动用户

似乎很简单...特别是如果不支持视频，使用Modernizr用于display:none;的css标签...所以这里需要注意的是：HTML5视频是边缘到边缘的，并且使用JavaScript以屏幕为中心我希望图像具有相同的行为。

我最初的想法很简单：海报属性。适用于iPad和iPhone 3 / 3gs，但可以在iPhone 4上播放..此外，不适用于IE，显然说“我不知道这是什么”，甚至不打扰海报

我在http://kzmnt.com/test/

期待您的建议！

Answer 1

您可以通过以下方式检查HTML5视频是否受支持：

function supports_h264_baseline_video() {
 if (!supports_video()) { return false; }
 var v = document.createElement("video");
 return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

就手机而言，尝试使用一些媒体查询。

以上代码来自http://diveintohtml5.ep.io/detect.html#video-formats。

Answer 2

在大约1100px之后使用媒体查询，并将其替换为使用css背景大小设置为覆盖的图像！

html5视频后备建议（没有闪存）

2 个答案: