Firefox移动端设置muted后视频autoplay失效问题咨询

Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted.

该报错的核心原因是移动端Firefox的自动播放策略比其他浏览器更严格，默认全局禁用所有无用户主动交互的媒体自动播放，哪怕媒体设置为静音状态，桌面端Firefox、Chrome、Edge的静音媒体自动播放白名单规则不适用于移动端Firefox。

可行落地方案如下：

• 通过用户主动交互触发播放
  这是兼容性最好、100%可落地的方案，所有浏览器的自动播放策略都允许用户主动交互（触摸、点击、按键等）触发的媒体播放。可以监听页面首次触摸事件，在回调中执行视频播放逻辑，示例代码：

  // 监听页面首次触摸事件，触发后自动移除监听
  document.addEventListener('touchstart', function initVideoPlay() {
    const vid = document.getElementById("myVideo");
    vid.muted = true;
    vid.loop = true;
    vid.playsInline = true;
    vid.play().catch(err => console.log('播放失败', err));
  }, { once: true });
  

• 显式添加playsinline属性+异步play调用
  部分版本的移动端Firefox未识别标签内的autoplay属性，需要在video标签添加playsinline属性避免视频强制全屏，同时用JS异步调用play方法兜底，示例标签和代码：
  标签代码：

  <video muted loop playsinline id="myVideo" src="视频地址"></video>
  

  JS逻辑：

  window.addEventListener('DOMContentLoaded', () => {
    const vid = document.getElementById("myVideo");
    // 二次确认muted属性生效，避免部分场景下属性读取异常
    vid.muted = true;
    vid.play().catch(e => {
      // 自动播放被拦截时，降级显示引导用户点击的播放按钮
      if (e.name === 'NotAllowedError') {
        document.querySelector('#videoPlayBtn').style.display = 'block';
      }
    })
  })
  

• 用户侧权限开启方案
  若必须实现无交互自动播放，可引导用户手动开启站点自动播放权限，路径为：移动端Firefox设置 -> 网站权限 -> 自动播放 -> 找到对应站点，选择允许自动播放。该方案需要用户手动操作，开发者无法通过代码强制触发权限变更。

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