Safari 11.0.3中Video play() API失效，跨浏览器播放器适配求助

这个问题我之前做兼容的时候也踩过坑，核心原因是Safari 11.x的自动播放政策比Chrome严格太多——默认状态下，它完全禁止无用户主动交互的视频自动播放，哪怕你通过JavaScript调用play()也会触发NotAllowedError，只有用户手动把Safari的自动播放偏好改成"Allow all Autoplay"才能绕开，但显然不能要求所有用户都这么做。

下面是几个可行的解决思路，按优先级排序：

1. 依赖用户交互触发播放（最稳妥） #

这是符合浏览器安全政策的标准做法，也是Safari官方推荐的方式。你可以添加一个播放按钮，让用户点击后再调用play()方法，示例代码如下：

<!-- 页面上添加播放触发按钮 -->
<button id="playTrigger">点击播放视频</button>
<video id="videoPlayer" width="640" height="360"></video>

<script>
const video = document.getElementById('videoPlayer');
const playBtn = document.getElementById('playTrigger');

// 设置视频源
video.src = 'your-video-source.mp4';
video.preload = 'metadata'; // 仅预加载元数据，避免触发资源加载限制

// 点击按钮触发播放
playBtn.addEventListener('click', async () => {
  try {
    await video.play();
    playBtn.style.display = 'none'; // 播放成功后隐藏按钮
  } catch (err) {
    console.error('播放失败:', err.message);
    // 这里可以给用户显示友好的错误提示
  }
});
</script>

2. 尝试自动播放+优雅降级 #

如果你的业务场景希望先尝试自动播放，失败时再引导用户手动操作，可以先调用play()并捕获异常：

const video = document.getElementById('videoPlayer');
video.src = 'your-video-source.mp4';

video.play()
  .then(() => {
    console.log('视频自动播放成功');
  })
  .catch(err => {
    // 自动播放被阻止，显示播放按钮
    document.getElementById('playTrigger').style.display = 'block';
    console.warn('自动播放受限，请手动点击播放');
  });

3. 针对Safari 11.x的额外注意点 #

• 旧版Safari甚至对静音视频的自动播放也有限制（后续版本放宽了这个规则），不要依赖muted属性绕过限制；
• 避免设置preload="auto"，这可能触发浏览器的资源加载拦截，建议用preload="metadata"；
• 不要在页面加载完成后立即调用play()（比如DOMContentLoaded或window.load事件里），Safari依然会判定为无用户交互。

错误原因补充 #

你遇到的Unhandled Promise Rejection: NotAllowedError (DOM Exception 35)，本质是浏览器的自动播放安全机制：Safari 11.0.3默认禁止脚本在无用户交互的情况下触发媒体播放，以此防止恶意网站自动播放音频打扰用户。

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