You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Chrome中HTML video标签autoplay点击刷新无效,如何解决?

问题原因与解决方案

这个问题是Chrome浏览器的自动播放政策限制在搞鬼。从Chrome 66版本开始,浏览器对带音频的媒体自动播放做了严格限制——只有满足特定条件,带声音的视频才能自动启动:

  • 用户已经和页面有过交互(比如点击、滚动操作)
  • 视频本身被设置为静音状态
  • 站点被用户手动加入自动播放白名单

你当前的代码里没有给视频加静音属性,所以Chrome在普通刷新(点击刷新按钮)时,会判定页面没有用户主动交互,直接阻止自动播放;而硬刷新(F5/Ctrl+F5)时可能因为缓存或会话的特殊状态暂时绕过了限制,但这不是稳定的解决办法。

修复方法

video标签加上muted属性就行,修改后的代码如下:

<video autoplay loop controls muted> 
  <source src="http://136.243.19.144/v/230518/4XFq546l.mp4" type="video/mp4"/> 
</video>

加上muted后,视频会以静音状态自动播放,完全符合Chrome的自动播放规则,不管是普通刷新还是硬刷新,都能正常自动播放了。

内容的提问来源于stack exchange,提问作者C0x

火山引擎 最新活动