HTML视频如何实现带声音自动播放且不添加controls属性

首先说死结论：所有现代主流浏览器（Chrome、Safari、Edge、Firefox）都在内核层面做了限制，没有任何前端代码能实现「用户首次打开页面、无任何交互就自动播放带声音的视频」，这不是代码写法问题，是浏览器为了防止恶意网站强制发声骚扰用户设置的强制规则，没有绕开的可能。

目前浏览器只会放行三类自动播放场景：

• 视频添加了muted静音属性，也就是你已经测试通过的静音自动播放场景
• 用户已经和当前站点产生过真实交互（点击、触摸、按键盘等主动操作，JS模拟的交互不算有效交互）
• 用户手动给站点开放了自动播放权限，或者用户访问站点频率足够高，被浏览器自动加入了自动播放白名单

你想要的「页面加载即播、默认开启声音、不添加controls控件」的效果，在用户首次访问站点的场景下100%无法实现，网上流传的各类绕过限制的黑科技在最新版浏览器中已经全部失效，没必要浪费时间测试。

可落地的兼容实现方案 #

目前行业内通用的做法是做体验降级，既符合浏览器规则，又尽量不破坏原有交互逻辑：

1. 页面初始加载阶段，视频保持muted+autoplay+playsinline+loop配置，保证视频可以正常静音自动播放，不会出现黑屏卡顿的问题
2. 给全局document绑定一次性的交互监听事件，只要用户在页面任意位置产生第一次主动交互，立刻将视频的muted属性设为false取消静音，这个操作由用户真实行为触发，浏览器不会拦截，视频会从当前播放进度开始带声音继续播放
3. 如果需要引导用户开声，可以在页面角落放置一个低干扰的声音开关提示，不需要添加原生controls控件破坏页面样式

参考实现代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <video class="childhood-img" muted autoplay loop playsinline src="替换为你的视频文件直链地址"></video>
</div>

$(function() {
  const videoEl = $('.childhood-img')[0]
  // 兜底触发播放，兼容部分浏览器不自动执行autoplay的情况
  videoEl.play().catch(err => console.log('播放初始化异常', err))

  // 监听到首次真实用户交互后取消静音
  $(document).one('click touchstart keydown', () => {
    videoEl.muted = false
  })
})

最后提几个你现有代码的问题：

• 不要把视频平台的观看页地址直接填入src属性，src需要配置视频文件的直链地址，普通观看页是网页链接而非视频流地址，浏览器无法直接加载解析
• mov格式视频的正确MIME类型是video/quicktime，一般不需要额外在video标签上声明type属性，写错type反而可能导致视频加载失败
• 不要尝试用JS模拟点击、触摸事件来触发取消静音，所有非用户真实发起的操作都会被浏览器的交互检测机制识别，直接拦截，没有效果

内容的提问来源于stack exchange，提问作者Bumboobee