如何检测Chrome/Safari/Firefox是否阻止了视频的自动播放? [英] How to detect if Chrome/Safari/Firefox prevented autoplay for video?

问题描述

从Chrome版本66开始，如果用户以前未曾在我的网站上访问过，则可能无法播放应在我的网站上自动播放的视频.

Since Chrome version 66, videos that should autoplay on my site may be prevented from playing if the user haven't been on my site before.

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

问题

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

Question

How do I detect if the video autoplay was disabled? And what can I do about it?

推荐答案

autoplay属性

根据网络标准规范，自动播放属性应仅是关于浏览器应使用媒体元素的提示. W3 都不/multipage/"rel =" noreferrer> WHATWG 网络规范中提到了何时阻止媒体自动播放，这意味着每种浏览器可能都有不同的实现方式.

The autoplay attribute

According to web standard specifications, the autoplay attribute should only be a hint for what the browser should to with the media element. Neither of W3 of WHATWG web specifications mentions anything about when to prevent autoplay for media, which means that each browser probably have different implementations.

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

Autoplay policies implemented by each browser now govern whether video should be allowed to autoplay.

• Chrome浏览器使用了他们称为媒体"的内容 参与度索引，您可以在此处了解更多信息. 此处.

• Safari开发人员在webkit上发表了帖子.组织 关于这个.

• Chrome uses something they call Media Engagement Index and you can read more about that here and their autoplay policy here.

• Safari developers made a post on webkit.org regarding this.

Firefox似乎将它交给用户来选择是否允许(链接).

Firefox seems to put it in the hands of the user to choose if it's allowed or not (link).

在本部分中，我将尝试介绍最佳实践以及您可以做什么.

I'll try to cover what the best practices are and what you can do in this section.

代替在元素上使用autoplay，可以在video和audio元素上使用play()方法来开始播放媒体. play()方法在现代浏览器中返回一个promise(均符合规范).如果承诺被拒绝，则可能表明您网站上当前的浏览器已禁用自动播放.

Instead of using autoplay on your element, you can use the play() method on the video and audio element to start playing your media. The play() method returns a promise in modern browsers (all according to the spec). If the promise rejects, it can indicate that autoplay is disabled in the current browser on your site.

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

can-autoplay is a library solely for detecting autoplay features for both video and audio elements.

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

The good thing is that when you know that autoplay is disabled you can, in some browsers, then mute the video and try the play() method again, while showing something in the UI that says that the video is playing while muted.

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>

这篇关于如何检测Chrome/Safari/Firefox是否阻止了视频的自动播放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！