Firefox中<video>标签使用Blob作为src时自动播放失效问题

我之前也碰到过一模一样的问题——用Blob生成的视频URL在Chrome、Safari、Edge这些浏览器里都能正常自动播放，唯独Firefox死活不生效，换成原始视频地址却又一切正常。这其实是Firefox对Blob资源的自动播放策略有特殊限制，下面给你拆解原因和可行的解决办法：

问题根源 #

Firefox的自动播放安全机制会把createObjectURL生成的Blob URL判定为「非用户主动触发加载的资源」，哪怕你已经设置了muted、autoplay、playsInline等所有合规属性，它依然会拦截自动播放请求。而原始视频URL属于标准的网络资源，符合Firefox的自动播放白名单，所以能正常触发。

可行的解决办法 #

1. 手动触发视频播放（最有效） #

在Blob URL绑定到video元素后，主动调用play()方法，最好放在loadedmetadata事件回调里，确保视频元数据加载完成后再触发：

// 先处理视频后缀，避免URL带参数导致MIME类型错误
const ext = videoUrl.split('.').pop().split('?')[0];
const blob = new Blob([new Uint8Array(data)], {type: `video/${ext}`});
const src = window.URL.createObjectURL(blob);

// 获取video元素并绑定播放逻辑
const videoEl = document.querySelector('video');
videoEl.src = src;
videoEl.muted = true; // 确保静音属性生效

videoEl.addEventListener('loadedmetadata', async () => {
  try {
    await videoEl.play();
  } catch (err) {
    console.error('Firefox自动播放触发失败:', err);
  }
});

Firefox允许在资源加载完成的上下文里手动调用play()，这不会触发自动播放限制。

2. 修正Blob的MIME类型 #

很多时候问题出在MIME类型错误上：如果你的视频URL带参数（比如xxx.mp4?v=1），直接split('.').pop()会得到mp4?v=1，生成的MIME类型是video/mp4?v=1，这是无效的。上面的代码通过split('?')[0]截取纯后缀，确保MIME类型格式正确。

3. 确认静音属性的有效性 #

Firefox的自动播放强制要求视频静音，哪怕你在HTML里写了muted，有时候动态修改DOM可能导致属性失效。建议在JS里明确设置videoEl.muted = true，确保属性处于激活状态。

验证步骤 #

如果还是不行，打开Firefox的控制台，看是否有类似NotAllowedError的报错。如果有，说明确实是自动播放限制被触发，用上面的手动播放方法就能解决。

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