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

Question

背景

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

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

题

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

Answer 1

当用户可能不想播放视频时,大多数大型浏览器(Safari,Firefox,Chrome)已经开始寻找防止视频自动播放的方法.这尤其适用于视频广告.在Chrome中,它被称为媒体参与度指数,您可以在此处详细了解.

如何检测

在现代浏览器中,元素autoplay上的方法autoplay现在返回一个promise.如果它拒绝它,因为您的站点上的浏览器禁用了自动播放.

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

如何处理它

好消息是,当您知道自动播放被禁用时,您可以将视频静音并play()再次尝试该方法,同时在UI中显示视频在静音时播放的内容.只要用户与页面交互,您就可以从头开始重新启动视频而不必静音.

我从Chromium Autoplay功能站点找到了以下代码.该网站还有一些关于该video属性的良好信息.

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();
  });
}