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

Question

背景

自 Chrome 版本 66 起，如果用户之前没有访问过我的网站，则本应在我的网站上自动播放的视频可能无法播放。

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

问题

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

Answer 1

自动播放属性

根据网络标准规范，autoplay 属性应该只是提示浏览器应该如何处理媒体元素。 W3 都不是的 WHATWG Web 规范提到了有关何时阻止媒体自动播放的任何内容，这意味着每个浏览器可能有不同的实现。

自动播放政策

每个浏览器实现的自动播放政策现在决定是否允许视频自动播放。

• Chrome 使用他们称为媒体的东西参与指数，您可以阅读更多相关信息 here和他们的自动播放政策 here .

• Safari 开发者制作了一个 post on webkit.org对此。

• Firefox 似乎将其交由用户选择是否允许(link)。

最佳实践

检测自动播放是否被禁用

您可以在video 和audio 上使用play() 方法，而不是在您的元素上使用autoplay code> 元素开始播放您的媒体。 play() 方法在现代浏览器中返回一个 promise (全部符合规范)。如果 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
  });
}

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