谷歌chrome浏览器无法自动播放video标签视频的问题

news2024/11/27 16:39:55

问题根源详见：Chrome中的自动播放政策>> https://developer.chrome.com/blog/autoplay/

The Autoplay Policy launched in Chrome 66 for audio and video elements and is effectively blocking roughly half of unwanted media autoplays in Chrome. For the Web Audio API, the autoplay policy launched in Chrome 71. This affects web games, some WebRTC applications, and other web pages using audio features. More details can be found in the Web Audio API section below.

Chrome 中的自动播放政策：

改善用户体验，最大限度地减少安装广告拦截器的动机，并减少数据消耗。

简单一点说，谷歌新Chrome浏览器只允许用户触发后才播放音频和视频。Chrome不允许用户对点击网页之前播放音频。

您可能已经注意到，网络浏览器正朝着更严格的自动播放政策发展，以改善用户体验，最大限度地减少安装广告拦截器的动机，并减少昂贵和/或受限网络上的数据消耗。这些更改旨在让用户更好地控制播放，并使具有合法用例的发布商受益。

Chrome 的自动播放策略很简单：

始终允许静音自动播放。
在以下情况下允许自动播放声音：
- 用户已与域进行交互（单击、点击等）。
- 在台式机上，已超过用户的媒体参与指数阈值，这意味着用户之前播放过有声视频。
- 用户已将站点添加到移动设备的主屏幕或在桌面设备上安装了 PWA。
顶级框架可以将自动播放权限委托给它们的 iframe，以允许自动播放声音。

说点实际的：

先尝试测试打开以下页面，检测当前浏览器是否支持自动播放：
Demo: can-autoplayhttps://video-dev.github.io/can-autoplay/

can-autoplay

video 🚫 ( Error "NotAllowedError": play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD)
video muted ✅
video inline 🚫 ( Error "NotAllowedError": play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD)
video inline muted 🚫 ( Error "AbortError": The play() request was interrupted because video-only background media was paused to save power. https://goo.gl/LdLk22)
audio 🚫 ( Error "NotAllowedError": play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD)
audio muted 🚫 ( Error "NotAllowedError": play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD)

Rerun Tests

选取要分享的视频(酷播云)