如何让MacOS Safari浏览器实现视频自动播放？

以下是针对你的问题的具体修复方案，按优先级排序：

• 修复jQuery选择器错误
  你的代码里jQuery选择器漏掉了类选择器的.符号，导致无法正确设置视频容器的宽高。Safari不会播放尺寸为0的视频，必须修正：

  // 原错误代码
  $("videoBackground").width(width).height(height);
  // 修正后
  $(".videoBackground").width(width).height(height);
  

• 添加webkit前缀兼容旧版Safari
  虽然playsinline是标准属性，但部分旧版MacOS Safari仍需要webkit-playsinline前缀才能正常识别，同时保持muted和autoplay属性（Safari要求静音才能自动播放）：

  <video preload="auto" autoplay muted loop playsinline webkit-playsinline>
    <source src="https://dl.dropboxusercontent.com/s/svb6t3bxnwsqvx3/Sweet_Home_mini.mp4?dl=0" type="video/mp4">
  </video>
  

• 验证视频编码兼容性
  Safari对H.264视频的编码规格有严格限制，必须使用Baseline或Main profile（High profile的视频在Safari中可能无法自动播放）。你可以用FFmpeg转码调整：

  ffmpeg -i Sweet_Home_mini.mp4 -c:v libx264 -profile:v main -c:a aac Sweet_Home_compatible.mp4
  

• 用JavaScript主动触发播放
  即使配置了自动播放属性，Safari有时仍需要主动调用播放方法。可以在视频加载完成后手动触发，并处理可能的错误：

  document.addEventListener('DOMContentLoaded', function() {
    const videoEl = document.querySelector('.videoBackground video');
    if (videoEl) {
      videoEl.load();
      videoEl.play().catch(error => {
        console.log("自动播放失败：", error);
        // 如果浏览器阻止自动播放，可在此处显示手动播放按钮
      });
    }
  });
  

• 检查浏览器自动播放设置
  确认用户的Safari没有禁用自动播放：打开Safari偏好设置 → 网站 → 自动播放，将当前网站的设置改为"允许静音自动播放"或"允许所有自动播放"。

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