HTML video标签在Safari中失效，已尝试多种解决方案仍未解决

以下是针对你的问题的具体排查和修复方案：

1. 确保视频编码适配Safari #

Safari对视频编码要求严格，MP4格式必须采用H.264 Baseline/Main/High Profile编码，音频（即使静音）需为AAC-LC编码。如果你的视频用了H.265等其他编码，会直接触发Safari的自动播放限制。
可以用FFmpeg重新编码：

ffmpeg -i input.mp4 -c:v libx264 -profile:v main -crf 23 -c:a aac -b:a 128k output-safari.mp4

2. 补充webkit前缀属性 #

标准的playsinline属性在Safari（尤其是iOS端）有时需要配合前缀才能生效，修改HTML代码：

<video autoplay muted playsinline webkit-playsinline loop class="bg-video__content">
  <source src="img/map2.mp4" type="video/mp4">
  <source src="img/map2.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

3. CSS强制隐藏播放按钮与交互 #

通过CSS彻底屏蔽Safari的默认视频控制元素，同时禁止用户交互：

.bg-video__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  /* 禁止交互，避免触发播放按钮 */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* 强制隐藏Safari原生控制栏 */
.bg-video__content::-webkit-media-controls,
.bg-video__content::-webkit-media-controls-enclosure {
  display: none !important;
}

4. 给无音频轨道的视频添加静音音轨 #

如果视频本身没有音频轨道，即使设置了muted，Safari的自动播放规则也可能异常。可以用FFmpeg添加静音音轨：

ffmpeg -i input.mp4 -f lavfi -i anullsrc=channel_layout=stereo:sample_rate=44100 -c:v copy -c:a aac -shortest output-with-silence.mp4

5. JS手动触发播放作为兜底 #

如果以上方法都无效，尝试在页面加载后用JS触发播放：

document.addEventListener('DOMContentLoaded', () => {
  const bgVideo = document.querySelector('.bg-video__content');
  bgVideo.addEventListener('loadedmetadata', () => {
    bgVideo.play().catch(err => {
      console.log('自动播放失败:', err);
    });
  });
});

额外注意：确保服务器开启了字节范围请求（Safari依赖此实现视频流式加载），同时控制视频文件大小，避免加载延迟触发播放限制。

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