为何Firefox自动播放非可视区域视频？Chrome与Safari则不会

测试代码 #

<video autoPlay controls muted preload="metadata" height="100%" width="100%" playsInline>
  <source src="https://video.dailymail.co.uk/video/1418450360/2015/02/1418450360_4056782948001_nerdist--1424015378606.mp4" type="video/mp4" />
  Sorry, your browser doesn't support embedded videos.
</video>

问题描述 #

上述video标签包含autoPlay、controls、muted、preload="metadata"、playsInline属性，实际测试发现：

• Chrome和Safari中，视频需进入用户视口才会启动自动播放；
• Firefox中，无论视频是否处于视口内，都会立即自动播放。

造成这种浏览器行为差异的原因是什么？

原因解析 #

这种差异源于不同浏览器厂商对自动播放策略的具体实现细节不同，核心是「用户体验」与「资源效率」的平衡逻辑差异：

1. Chrome/Safari的视口触发逻辑
   这两款浏览器采用更严格的「可见性优先」规则，即使视频已静音，仍将「视频进入视口」作为自动播放的额外触发条件。这么做的目的是避免加载并播放用户当前未关注的视频，节省带宽和设备性能，同时减少对用户浏览流程的不必要干扰。

2. Firefox的立即播放逻辑
   Firefox对静音视频的自动播放限制更宽松，只要满足「静音」这一W3C自动播放规范的核心安全条件，就会直接执行autoPlay，无需等待视频进入视口。Firefox认为静音视频不会对用户造成声音干扰，立即播放能让视频提前完成加载缓冲，当用户滚动到视频位置时可实现无缝观看。

另外，W3C的自动播放规范仅明确了「静音或无音频轨道」是自动播放的安全前提，但并未强制要求将「视口可见性」作为触发条件，这就给了浏览器厂商自主优化的空间，最终导致了这种行为差异。

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