1

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

如果出现以下情况，请给他们图像：

  1. 如果桌面浏览器不支持 HTML5 视频

  2. 如果用户是移动的

看起来很简单......尤其是如果视频不受支持，则将 Modernizr 用于 css 标签display:none;......所以这里有一个警告：HTML5 视频是边缘到边缘并使用 JavaScript 以屏幕为中心，我希望图像有相同的行为。

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

我在http://kzmnt.com/test/上设置了一个测试

期待您的建议！

4

2 回答 2

2

您可以通过以下方式检查是否支持 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。

于 2011-07-05T20:14:34.587 回答
1

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

于 2011-07-20T07:07:09.543 回答