iOS Safari下页面跳转后HTML5视频自动播放实现方案咨询

iOS Safari 的媒体自动播放限制只认当前页面生命周期内的用户交互事件，上一个页面的点击不会被继承到新页面，因此需要围绕该规则做适配，以下是可落地的实现方案：

• 方案1：改为单页应用(SPA)路由跳转，不触发页面刷新 #

  不做真实的浏览器页面跳转，用户点击列表页播放按钮后，用前端路由（Hash路由、History API）切换视图，视频详情页仅为当前页面内的DOM节点替换。由于用户的点击事件是在当前页面触发的，可直接在点击回调中初始化视频并调用play()方法，完全符合Safari的交互触发规则，不会被拦截。
  如果现有项目为多页应用，可将视频详情页的DOM模板预加载到列表页，点击后直接渲染，使用体验和真实跳转完全一致。

• 方案2：用本地存储标记用户交互状态，配合静音自动播放兜底 #

  iOS Safari 允许静音状态的视频自动播放，你可以在列表页用户点击播放按钮时，往LocalStorage/SessionStorage写入should_autoplay = 1的标记，跳转后详情页读取到该标记后优先尝试调用播放接口，播放被拦截时自动切静音播放，示例代码如下：

  const video = document.querySelector('video');
  const canAutoPlay = sessionStorage.getItem('should_autoplay') === '1';
  if (canAutoPlay) {
    video.play().catch(() => {
      // 非静音播放被拦截时，自动切换静音播放
      video.muted = true;
      video.play();
      // 页面同步展示「点击取消静音」的提示按钮即可，符合用户预期
    });
    // 用完即清除标记，避免其他场景误触发
    sessionStorage.removeItem('should_autoplay');
  }
  

  该方案兼容性最好，不需要改动现有多页应用的架构。

• 方案3：配置Safari站点自动播放权限（仅适用可控设备场景） #

  如果你的业务是企业内部应用、自助设备等可以控制用户设备设置的场景，可引导用户在Safari设置→对应网站→「自动播放」权限中选择「允许全部自动播放」，配置后站点内所有视频都可以直接自动播放，不需要用户交互触发，该方案不适用于面向普通公众的站点。

注意：不要尝试用伪造用户事件、定时器延时调用play()的方式绕过限制，iOS Safari的安全策略会直接拦截这类调用，触发播放失败报错。

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