<video>标签在iPhone等苹果设备无法播放？网页视频适配问题咨询

核心排查方向 #

• 视频编码适配问题
  苹果Safari仅兼容H.264编码的MP4格式视频，若你的MP4文件使用MPEG-4、H.265/HEVC等编码，即便后缀是.mp4也无法正常播放。可通过FFmpeg、格式工厂等工具重新转码，转码时选择H.264 baseline profile，同时控制视频分辨率不超过4K、码率不超过25Mbps降低兼容门槛。
  建议优化source标签的type属性，明确指定编码，帮助Safari快速识别兼容格式：

  <source src="/xxx.mp4" type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
  

• 兼容属性补全
  你当前代码的playsinline仅适配新版本iOS，需要额外添加webkit-playsinline属性兼容iOS 10及更早版本设备，调整后的video标签示例：

  <video class="intro-header-mobile" playsinline webkit-playsinline autoplay loop muted preload="auto" width="100%" height="100%">
    <source src="/medias/custom-content/projects/2021/Own-brand-hub/e0821_Ownbrand_mob_v2.mp4" type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
    <source src="/medias/custom-content/projects/2021/Own-brand-hub/e0821_Ownbrand_mob_v2.webm" type="video/webm">
  </video>
  

  同时可添加JS兜底确保静音属性生效，避免Safari因音频权限拦截自动播放：

  const video = document.querySelector('.intro-header-mobile')
  video.muted = true
  video.play().catch(err => {
    // 自动播放被拦截时可引导用户手动触发播放
  })
  

• 服务器配置校验
  Safari加载视频时默认发送分片请求，要求服务器支持Range请求、返回206 Partial Content状态码。可通过浏览器控制台查看视频资源的响应头：
  • 确认存在Accept-Ranges: bytes响应头
  • 确认资源返回状态码为206而非200
    若不符合要求，需要调整静态资源服务器的配置，开启分片传输支持。
• 测试排查方法
  你可以先找已知兼容iOS的测试MP4上传到你的服务器测试播放：
  • 若测试视频可正常播放，说明原视频编码存在问题，重新转码即可
  • 若测试视频也无法播放，说明问题出在服务器配置或前端属性配置

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