有没有办法检测是否调用play()
是否允许在没有用户手势的情况下在视频元素上进行操作?
在 Android Chrome 上会出现此警告:
Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.
因此,在 Android 版 Chrome 上,需要用户手势才能开始播放视频,而在桌面版 Chrome 上则不需要。
有没有办法检测我会得到哪种行为?
我希望在我的应用程序中具有稍微不同的行为,具体取决于是否允许以编程方式调用播放。
我尝试过使用Modernizr.videoautoplay
,但这会检查是否autoplay
元素上的属性,这不是一回事。这会给 IE11 和 Edge 带来误报。
编辑:添加一个例子 http://ea7e83c432c066554d3ef3e6580aa1af9bd594a1.googledrive.com/host/0BwqnHXhKkJ7mfjF5clFzSUFSY3pjSzhxZlA0TnpIeEo2bHlaY2FZd3RhWDFHY1o2eXZsYXc/android_play_fail.html。视频将在 Windows 8 或 10 上的 Chrome 桌面和 IE11 或 Edge(有 3 秒延迟)中自动开始播放。对于 Chrome@Android,需要用户交互(单击按钮),并且可以在控制台中看到错误消息。
play 方法返回一个可用于捕获错误的承诺。
并非所有浏览器都遵循规格 https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play所以你必须首先检查返回的内容是否是一个承诺。
var autoPlayAllowed = true;
var promise = document.createElement("video").play();
if(promise instanceof Promise) {
promise.catch(function(error) {
// Check if it is the right error
if(error.name == "NotAllowedError") {
autoPlayAllowed = false;
} else {
throw error;
}
}).then(function() {
if(autoPlayAllowed) {
// Allowed
} else {
// Not allowed
}
});
} else {
// Unknown if allowed
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)