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

Question

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

Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.

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

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

我曾尝试使用 Modernizr.videoautoplay，但它会检查元素上的 autoplay 属性，这不是一回事。这为 IE11 和 Edge 提供了误报。

编辑：添加 an example。视频将在 Chrome 桌面和 IE11 或 Edge（延迟 3 秒）在 windows 8 或 10 上自动开始播放。对于 Chrome@Android 需要用户交互（单击按钮），然后可以在控制台中看到错误消息。

Answer 1

play 方法returns 可用于捕获错误的承诺。

并非所有浏览器都遵循 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
}

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

Feature detect if user gesture is needed

javascript

html5-video

modernizr

feature-detection