html5 视频后备建议（无 Flash）答案

【问题标题】：html5 video fallback advice (no flash)html5 视频后备建议（无 Flash）
【发布时间】：2011-07-04 23:08:35
【问题描述】：

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

在以下情况下给他们图片：

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

看起来很简单...特别是如果视频不受支持，则使用 Modernizr 处理带有 display:none; 的 css 标签...所以需要注意的是：HTML5 视频是边缘到边缘并使用 JavaScript 和我在屏幕上居中的'希望图像具有相同的行为。

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

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

期待您的建议！

【问题讨论】：

只是出于好奇，您为什么不希望您的视频在移动设备上播放？您认为移动设备是什么（平板电脑、智能手机、旧手机、上网本、PSP）？
视频很大而且很负责.. 并且占据了整个背景。除了 iPad 与 iPhone 4 与 iPhone 3G/3Gs 上的 iOS 行为差异之外，我认为用他们没有选择观看的视频打击数据计划的人有点粗鲁。

标签： css video mobile html5-video modernizr

【解决方案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。

【讨论】：

【解决方案2】：

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

【讨论】：