HTML video标签未启用controls属性时无法播放mp4文件问题求助

问题原因 #

• 主流浏览器自动播放策略限制：Chrome、Edge、Firefox等现代浏览器默认禁止带音频的非静音视频自动播放，除非页面已经获得用户点击、触摸等主动交互，否则自动播放请求会被直接拦截。
• 控件存在与否会影响浏览器加载判定：当你添加了controls属性时，就算自动播放被拦截，用户也可以手动触发播放，因此浏览器会正常加载视频资源；如果没有controls属性同时自动播放请求被拦截，浏览器会认为该视频没有播放触发入口，直接终止资源加载流程，就出现了观察到的“不会尝试加载”的现象。
• 本地文件协议额外限制：通过file://协议打开本地网页时，浏览器的安全校验规则比http/https场景更严格，对自动播放的拦截阈值也会更高。

可行解决方案 #

方案1：自动播放时添加静音属性 #

如果不需要默认播放声音，给video标签加muted属性即可实现无controls下的自动播放，代码示例：

<video width="480" height="320" autoplay muted> 
<source src="Triangle.mp4" type="video/mp4">
Your browser does not support the video tag.
</video> 

方案2：通过用户交互触发播放 #

如果需要带音频播放，可以绑定页面的点击事件触发视频播放，代码示例：

<video id="myVideo" width="480" height="320"> 
<source src="Triangle.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
// 监听页面任意点击后播放
document.addEventListener('click', () => {
  document.getElementById('myVideo').play()
})
</script>

方案3：保留controls属性 #

如果允许用户控制播放进度、音量等，直接保留controls属性即可符合浏览器的策略要求，正常加载播放。

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