Next.js中Webm格式视频在安卓及iOS移动端消失问题求助

核心问题 #

移动端浏览器（包括iPadOS/iOS的Safari、安卓主流浏览器）对带Alpha透明通道的WebM格式支持度极低，甚至完全不兼容，这是导致视频无法显示的根本原因。

具体解决方案 #

• 添加兼容格式的 fallback 源
  生成支持透明通道的HEVC编码MP4（即带Alpha的H.265格式，iOS 11+、安卓新版本浏览器均支持），同时保留WebM作为桌面端优先选项。浏览器会自动识别并加载自身支持的格式。
  调整后的代码示例：

  <video muted autoPlay loop playsInline>
    <source src='/assets/v2.webm' type='video/webm; codecs="vp8, vorbis"' />
    <source src='/assets/v2-hevc-alpha.mp4' type='video/mp4; codecs="hvc1, mp4a.40.2"' />
  </video>
  

  注意必须添加playsInline属性，iOS默认会强制视频全屏播放，该属性可确保视频内联显示，同时满足自动播放的要求。

• 检查视频编码参数

  • WebM视频尽量使用VP9编码（比VP8的移动端兼容性稍好），确保透明通道编码正确；
  • 生成HEVC Alpha MP4时，需明确启用透明通道，用ffmpeg的示例命令：

    ffmpeg -i input.webm -c:v libx265 -tag:v hvc1 -pix_fmt yuva420p -c:a aac output-hevc-alpha.mp4
    

• iOS专属优化

  • 保持muted属性：iOS的自动播放策略严格要求视频静音才能自动触发播放；
  • 控制视频文件大小：过大的视频会导致移动端加载超时，表现为视频无法显示。

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