html5 视频后备建议（无 Flash）

发布于 2024-11-18 08:18:41 字数 534 浏览 5 评论 0原文

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

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

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

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

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

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

期待您的建议！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

手心的海 2024-11-25 08:18:41

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

You can check if HTML5 video is supported with the following:

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"');
}

As far as mobile goes, try using some media queries.

The above code is from http://diveintohtml5.ep.io/detect.html#video-formats.

回复收藏 0 原文