如何检测Chrome / Safari / Firefox是否阻止了自动播放视频？

Question

背景

自Chrome版本66以来，如果用户以前没有访问过我的网站，那么我网站上应该自动播放的视频可能无法播放。

<video src="..." autoplay></video>

题

如何检测视频自动播放是否已禁用？我能做些什么呢？

Answer 1

autoplay属性

根据Web标准规范，autoplay属性应该只是浏览器应该使用media元素的提示。 W3 web规范的WHATWG都没有提及何时阻止媒体自动播放，这意味着每个浏览器可能有不同的实现。

自动播放政策

现在，每个浏览器实施的自动播放策略管理是否允许视频自动播放。

• Chrome使用他们称之为Media Engagement Index的内容，您可以阅读更多有关here及其自动播放政策here的信息。
• Safari开发者就此做了一个post on webkit.org。
• Firefox似乎将其置于用户手中以选择是否允许（link）。

最佳做法

我将尝试介绍最佳实践以及您可以在本节中执行的操作。

Detecting if autoplay is disabled

您可以在autoplay和play()元素上使用video方法开始播放媒体，而不是在元素上使用audio。 play()方法在现代浏览器中返回一个承诺（全部根据规范）。如果承诺拒绝，则可以指示在您网站上的当前浏览器中禁用了自动播放。

can-autoplay是一个专门用于检测视频和音频元素的自动播放功能的库。

If autoplay is disabled

好消息是，当您知道自动播放被禁用时，您可以在某些浏览器中静音视频并再次尝试使用play()方法，同时在UI中显示视频正在静音时播放的内容。

var video = document.querySelector('video');
var promise = video.play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Show something in the UI that the video is muted
    video.muted = true;
    video.play();
  });
}

<video src="https://www.w3schools.com/tags/movie.ogg" controls></video>

Answer 2

对我来说最好的解决方案是

function _callback_onAutoplayBlocked() {
    // do something, for example "show big play button"
}

function isSafari() {
    var chr = window.navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
    var sfri = window.navigator.userAgent.toLowerCase().indexOf("safari") > -1;
    return !chr && sfri;
}

function _checkAutoPlay(p) {
    var s = window['Promise'] ? window['Promise'].toString() : '';

    if (s.indexOf('function Promise()') !== -1 || s.indexOf('function ZoneAwarePromise()') !== -1) {
        p.catch(function(error) {
            console.error("_checkAutoPlay, error:", error)
            if(error.name == "NotAllowedError") { // For Chrome/Firefox
                console.error("_checkAutoPlay: error.name:", "NotAllowedError")
                _callback_onAutoplayBlocked();
            } else if (error.name == "AbortError" && isSafari()) {  // Only for Safari
                console.error("_checkAutoPlay: AbortError (Safari)")
                _callback_onAutoplayBlocked();
            } else {
                console.error("_checkAutoPlay: happened something else ", error);
                // throw error; // happened something else
            }
        }).then(function(){
            console.log("_checkAutoPlay: then");
            // Auto-play started
        });
    } else {
        console.error("_checkAutoplay: promise could not work in your browser ", p);
    }
}

var video1 = document.getElementById('video1');
_checkAutoPlay(video1.play());