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

Question

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

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

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

我想在我的应用程序中略有不同的行为,具体取决于是否允许以编程方式调用play.

我试过用Modernizr.videoautoplay,但是检查autoplay元素上的属性是不是一回事.这给IE11和Edge带来了误报.

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

Answer 1

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
}