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

Chrome从66版开始实施自动播放政策,阻止大部分未授权的媒体自动播放,以改善用户体验,减少数据消耗,并影响到WebAudioAPI。政策要求音频和视频需用户交互后才能播放,除非静音。用户与站点交互、高媒体参与指数或站点被添加到主屏幕等情况例外。开发者可以通过设置静音或利用PWA等机制适应此政策。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题根源详见: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

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

新版谷歌默认是不支持带音量视频的,所以让视频先静音。

<video  src="https://tony.89525.com/test.mp4"  autoplay="auto play"  muted controls="controls">
</video>

再试一下呢?

MR虚拟直播

无延迟直播

视频加密与安全

在线导播台

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值