javascript - 功能检测是否需要用户手势

Question

有没有办法检测在没有用户手势的情况下是否允许在视频元素上调用 play()？在 Android Chrome 上会发出此警告:

无法在“HTMLMediaElement”上执行“播放”:API 只能通过用户手势启动。

因此，在 Chrome Android 上，需要用户手势才能开始播放视频，而在桌面版 Chrome 上则不需要。有没有办法检测我会得到哪种行为？

我希望在我的应用程序中有稍微不同的行为，具体取决于是否允许以编程方式调用播放。

我曾尝试使用 Modernizr.videoautoplay，但它会检查元素上的 autoplay 属性，这不是一回事。这会导致 IE11 和 Edge 出现漏报。

编辑:添加了an example .该视频将在 Windows 8 或 10 上的 Chrome 桌面和 IE11 或 Edge(延迟 3 秒)中自动开始播放。对于 Chrome@Android，需要用户交互(单击按钮)，并且可以在控制台中看到错误消息。

Answer 1

play 方法返回一个可用于捕获错误的 promise 。

并非所有浏览器都遵循the specification所以你必须先检查返回的是否是一个 promise 。

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
}