【问题标题】：How to detect if Chrome/Safari/Firefox prevented autoplay for video?如何检测 Chrome/Safari/Firefox 是否阻止视频自动播放？
【发布时间】：2018-10-01 00:58:51
【问题描述】：

背景

从 Chrome 版本 66 开始，如果用户之前没有访问过我的网站，则可能会阻止播放应该在我的网站上自动播放的视频。

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

问题

如何检测视频自动播放是否被禁用？我该怎么办？

【问题讨论】：

Chrome 似乎有时会阻止自动播放，即使您已访问该网站 100 次，但只是有时。这种不一致使测试变得非常困难，而且我认为 VideoJS 不能与已接受答案中详述的承诺框架一起使用。
是的，媒体参与度指数可能看起来像黑魔法，但在docs.google.com/document/d/… 中明确说明了它是如何衡量的。 VideoJS 确实支持在浏览器中可用时返回一个 Promise。 docs.videojs.com/player.js.html#line2172
iOS Safari 测试提示：开启低电量模式会阻止自动播放。这是最简单的测试方法。不确定 Android 是做什么的。

标签： google-chrome firefox video safari video.js

【解决方案1】：

`autoplay` 属性

根据网络标准规范，自动播放属性应该只是提示浏览器应该对媒体元素做什么。 W3 和 WHATWG web 规范都没有提到何时阻止媒体自动播放，这意味着每个浏览器可能有不同的实现。

自动播放政策

每个浏览器实施的自动播放政策现在可以控制是否应允许视频自动播放。

Chrome 使用他们称之为媒体的东西参与度指数，您可以阅读更多关于 here 及其自动播放政策 here 的信息。
Safari 开发者发了一个post on webkit.org 关于这个。
Firefox 似乎把它交给用户来选择是否允许 (link)。

最佳做法

检测自动播放是否被禁用

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

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

如果禁用自动播放

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

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

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay not allowed!
    // Mute video and try to play again
    video.muted = true;
    video.play();

    // Show something in the UI that the video is muted
  });
}

&lt;video src="https://www.w3schools.com/tags/movie.ogg" controls&gt;&lt;/video&gt;

【讨论】：

@sea-kg，到底是什么不工作？可能是您的 Safari 版本不支持 video.play() 返回 Promise。
Safari 版本为 12.0.3 (14606.4.5)。检测无法正常工作在我的情况下，最好的解决方案是处理错误 NotAllowedError for Chrome and Firefox and "AbortError" only for Safari
有什么方法可以在不尝试先播放音频的情况下做到这一点？
不确定，但如果确实播放了音频，您可以在成功播放后立即暂停。

【解决方案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());