页面刷新后video标签Autoplay属性不生效 视频无法自动播放求助

核心原因 #

• 目前所有主流桌面端、移动端浏览器均有自动播放限制规则：包含音频轨道且未静音的视频，默认禁止自动播放，仅在用户已主动和当前页面产生交互（点击、滑动等操作）的场景下才会被放行。你当前的代码未添加静音属性，若视频本身带有音频，自动播放请求会直接被浏览器拦截。

修复代码 #

你需要的可自动播放、循环、无控制条的视频正确实现如下：

<video src="./images/Kusko Enterprise Catering Services - Google Chrome 2021-10-03 16-30-57_Trim.mp4" class="kusko_catering_video" autoplay muted loop playsinline></video>

新增属性说明 #

• muted：浏览器自动播放的强制要求，设置后视频静音播放，符合自动放流规则。如果需要视频播放时有声音，只能引导用户点击页面任意位置后，通过JS手动解除静音状态。
• loop：实现视频循环播放的需求。
• playsinline：适配移动端浏览器，避免视频触发默认的全屏播放逻辑。

额外排查项 #

如果修改后仍然无法播放，可做以下校验：

• 打开浏览器控制台F12切换到Console面板，确认是否有视频资源加载报错，检查视频文件路径是否正确。
• 确认属性拼写没有错误，所有属性均添加到video标签内。

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