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

Question

背景

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

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

问题

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

Answer 1

autoplay属性

根据网络标准规范，自动播放属性应该只是提示，因为浏览器应该使用媒体元素。 W3 WHATWG个网络规范中没有提到任何关于何时阻止媒体自动播放的内容，这意味着每个浏览器可能有不同的实现。

自动播放政策

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

• Chrome使用的是他们称之为Media的内容 参与指数，您可以详细了解here及其自动播放政策here。

• Safari开发人员制作了post on webkit.org 对此。

• Firefox似乎将其置于用户手中以选择是否允许（link）。

最佳做法

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

检测是否禁用自动播放

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

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

如果禁用自动播放

好消息是，当您知道自动播放被禁用时，您可以在某些浏览器中将视频静音并再次尝试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

对我来说最好的解决办法是：

/Users/igisan/Desktop/scripts/calendar.py