HTML5 video如何让Chrome/Safari自动选择适配的透明MOV/WEBM源

完全可以通过给<source>标签配置带完整能力参数的MIME类型实现原生自动回退，不需要写JavaScript判断浏览器类型，核心是不要用笼统的MIME类型，必须明确声明视频需要的编解码、透明通道支持能力，让浏览器自行判断是否匹配。

正确代码写法 #

<video autoplay muted loop playsinline>
  <!-- 带透明通道的HEVC编码MOV文件，优先给支持的Safari使用 -->
  <source 
    src="your-transparent-video.mov" 
    type='video/mp4; codecs="hvc1"; supports-alpha=true'
  />
  <!-- 带透明通道的VP9编码WEBM文件，给Chrome使用 -->
  <source 
    src="your-transparent-video.webm" 
    type='video/webm; codecs="vp09"; supports-alpha=true'
  />
</video>

原理解释 #

之前遇到的源选择异常，本质是type属性写得太模糊，导致浏览器误判自身支持情况：

• 给MOV文件只写type="video/mp4"时，Chrome只检测到自己支持普通MP4容器的HEVC编码，不知道这个视频需要透明通道支持，就会直接选中第一个MOV源，忽略后续WEBM。
• 把WEBM放在第一位时，Safari只检测到自己支持普通WEBM容器的VP9编码，不知道该源需要透明通道支持，就会直接选中WEBM，导致透明效果失效。

加上supports-alpha=true参数和明确的codec声明后，浏览器原生的source选择逻辑会完全符合预期：

1. 从上到下遍历source时，Safari首先检测到第一个MOV源的所有要求（MP4容器、hvc1编码、透明通道支持）都完全满足，直接选中该源播放，透明效果正常，不会继续读取后续WEBM源。
2. Chrome检测到第一个MOV源要求支持MP4容器下的HEVC透明通道，自身不支持该特性，会自动跳过该源，继续遍历到第二个WEBM源，检测到自身完全支持WEBM容器下VP9编码的透明通道，就选中WEBM播放，透明效果正常。

注意事项 #

• 不要使用video/mov作为MIME类型，MOV属于QuickTime容器，和MP4标准兼容，带HEVC透明通道的MOV标准MIME类型声明就是video/mp4配合对应参数。
• 不要省略supports-alpha=true参数，这是浏览器判断是否支持透明视频的核心标记，缺失就会出现之前的误判问题。
• 配置完成后可以通过浏览器网络面板验证：Chrome只会请求WEBM文件，Safari只会请求MOV文件，不会出现多余的资源加载。

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