HTML <video>元素在iOS/iPhone设备无法播放问题求助

关键修复要点： #

• 视频编码兼容性：确保MP4视频采用H.264 Baseline Profile编码，分辨率建议不超过1080p，码率控制在5Mbps以内，避免使用iPhone不支持的高等级H.265或非标准MP4编码。
• inline播放属性：同时保留playsinline和webkit-playsinline，避免iOS默认触发全屏视频播放器。
• 静音验证：优先使用无音频轨道的视频文件，仅靠muted属性可能无法绕过部分iOS的自动播放限制。
• 路径大小写：iOS文件系统区分大小写，检查视频路径的大小写需与服务器文件完全一致。
• 样式适配：给视频容器和视频本身设置正确的定位样式，确保视频作为背景正常显示且不被遮挡。

修改后的代码示例 #

示例1（单MP4源）：

<div class="banner-container">
  <video 
    src="assets/images/BannerVideo.mp4" 
    autoplay 
    muted 
    loop 
    playsinline 
    webkit-playsinline
    preload="auto"
    disablePictureInPicture
  ></video>
</div>

<style>
.banner-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.banner-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
}
</style>

示例2（多源视频）：

<div class="banner-container">
  <video 
    autoplay 
    muted 
    loop 
    playsinline 
    webkit-playsinline
    preload="auto"
    disablePictureInPicture
  >
    <source src="assets/images/newphone.mp4" type="video/mp4">
    <!-- 优先MP4，WebKit对WebM的支持有限 -->
    <source src="assets/images/newphone.webm" type="video/webm">
  </video>
</div>

<style>
.banner-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.banner-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
}
</style>

额外排查步骤 #

1. 直接在iPhone Safari中打开视频URL（如https://your-domain.com/assets/images/BannerVideo.mp4），若无法播放则说明视频编码或文件损坏，需重新转码。
2. 确保网站运行在HTTPS环境下（本地localhost除外），iOS要求自动播放视频必须使用HTTPS。
3. 添加disablePictureInPicture属性，避免iOS自动触发画中画模式导致视频无法作为背景显示。

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