特征检测是否需要用户手势

Feature detect if user gesture is needed

本文关键字:用户 是否 特征检测      更新时间:2023-09-26

是否有一种方法可以检测在没有用户手势的情况下是否允许在视频元素上调用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产生假阴性。

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

play方法返回一个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
}