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

时间:2015-09-18 13:39:18

标签: javascript html5-video modernizr feature-detection

有没有办法检测在没有用户手势的情况下是否允许在视频元素上调用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带来了误报。

修改:已添加an example。视频将在Windows桌面和IE11或Edge上自动播放(在Windows 8或10上有3秒延迟)。对于Chrome @ Android,需要用户交互(单击按钮),并且可以在控制台中看到错误消息。 / p>

1 个答案:

答案 0 :(得分:4)

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

并非所有浏览器都遵循the specification,因此您必须首先检查返回的内容是否为承诺。

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
}