iOS设备Safari浏览器无法播放WebM格式视频如何解决

以下问题仅出现在iOS设备播放WebM格式视频的场景中，请勿反馈沙箱环境打开示例可正常运行，测试需在真实iOS设备上操作验证。

问题复现所用基础代码：

<video
  id="video-which-do-not-want-to-work"
  autoplay
  loop
  muted
  playsinline
  width="400"
  height="300"
  src="https://dl8.webmfiles.org/elephants-dream.webm"
></video>

已尝试的排查方案 #

• 移除autoplay属性后尝试播放
• 参考公开技术方案，添加playsinline与muted属性
• 尝试在video标签内使用指定type为webm的source标签引入资源
• 尝试模拟按钮点击触发播放，对应实现代码如下：

const button = document.createElement('button')

button.addEventListener('click', () => {
  document.getElementById('video-which-do-not-want-to-work').play()
})

button.click()

• 在HTML中添加实体按钮，绑定onclick事件执行element.play()方法触发播放
• 已确认测试设备未开启「低电量模式」

测试设备系统版本：iOS 15.5

修复方案 #

核心根因：iOS 15.x 系列对WebM的支持属于实验性阶段，15.0~15.6版本仅原生支持VP8视频编码+Vorbis音频编码的WebM文件，不支持VP9编码、Opus音频编码的WebM，也不支持通过MSE方式加载WebM资源，所有属性层面的调整都无法绕过这个系统级编解码限制。

按优先级尝试以下方案即可解决问题：

1. 做格式兼容降级
   准备一份H.264编码的MP4格式同内容视频，通过source标签按兼容优先级排列，iOS设备会自动选择支持的MP4源加载，非iOS设备可正常加载WebM源，示例代码：

   <video
     id="video-which-do-not-want-to-work"
     autoplay
     loop
     muted
     playsinline
     webkit-playsinline
     width="400"
     height="300"
   >
     <source src="your-local-path/elephants-dream.mp4" type="video/mp4">
     <source src="https://dl8.webmfiles.org/elephants-dream.webm" type="video/webm">
   </video>
   

   注意额外添加webkit-playsinline属性，适配iOS 15 内置Webview的行内播放规则，避免被系统强制拦截触发全屏播放权限限制。
2. 校验转码现有WebM文件
   如果必须使用WebM格式，先用ffprobe检查目标WebM的编码参数，如果是VP9/Opus编码，用ffmpeg转码为iOS 15兼容的VP8+Vorbis编码即可原生播放，转码命令参考：

   ffmpeg -i input.webm -c:v libvpx -b:v 1M -c:a libvorbis output_ios15_compatible.webm
   

3. 软解码兜底
   如果既不能转码也不能加MP4降级源，可引入前端WebM软解码库，将解码后的帧渲染到canvas上播放，绕过系统原生编解码限制，注意该方案有额外性能开销，仅适合10分钟以内的短视频场景。

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