部分iOS设备（iPad、iPhone）无法播放HTML5视频问题求助

1. 补全iOS专属播放属性+强制videojs配置项 #

你只在标签上加了playsinline，漏掉了iOS端必须的带webkit前缀的同功能属性，同时要在videojs初始化时显式配置inline播放，避免框架覆盖原生属性：

<!-- 标签上补全webkit前缀属性 -->
<video-js class="vjs-big-play-centered" controls preload="auto" playsinline webkit-playsinline muted id="vid1">
  <source src="" type="video/mp4">
</video-js>

// 初始化时强制开启inline播放配置
const player = videojs('vid1', {
  playsinline: true,
  autoplay: false, // 建议关闭自动播放，用用户交互触发
  preload: 'auto'
});

2. 修复视频文件本身的兼容性问题 #

部分iOS设备对mp4格式的容忍度极低，必须满足以下要求：

• 视频编码必须为H.264，音频编码必须为AAC，禁止使用HEVC(H.265)编码
• H.264的编码profile必须选择Baseline或Main等级，不要使用High profile
• 视频分辨率不要超过当前iOS设备的最大支持，老旧iOS设备最高只支持1080p分辨率
• 必须将视频的moov原子移到文件头部，可使用ffmpeg命令批量处理：
  ffmpeg -i 输入视频路径.mp4 -movflags faststart -acodec copy -vcodec copy 输出视频路径.mp4

3. 适配iOS播放触发规则 #

iOS所有版本都要求视频播放必须在用户主动交互的上下文中触发，哪怕配置了muted、autoplay也可能在部分系统版本/低功耗模式下被拦截：

• 不要在DOMContentLoaded、window.load这类非用户交互事件中调用play()
• 新增明确的用户点击触发逻辑，比如绑定页面按钮/播放容器的click事件，在事件回调中调用player.play()
• 动态修改src之后必须手动调用player.load()触发加载，iOS不会自动识别src变更

4. 特殊场景适配 #

如果你的页面是内嵌在App的WKWebView中，需要让原生开发补充两个配置：

• 给WKWebView设置allowsInlineMediaPlayback = YES
• 设置mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone（无音频场景可配置）

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