HTML video标签无法正确选择source资源的问题求助

你的问题核心不是source顺序，而是视频编码的兼容性：浏览器会按source的排列顺序，优先选用第一个它能解码的格式，但你现在的MP4用了HEVC（H.265）编码，Chrome这类浏览器对HEVC的支持并不完善；WebM用了VP9编码，Safari对VP9的支持也很差，所以不管怎么调整顺序，总有浏览器出问题。

给你两个可行的解决思路：

方案一：用通用编码做兜底（最省心） #

把MP4换成H.264编码的版本——这是所有现代浏览器都完美支持的通用编码，把它放在第一个source位置，作为兜底；WebM（VP9）放在第二个，让Chrome、Firefox这类支持VP9的浏览器自动选择更高效的WebM格式。

修改后的代码：

<div class="container">
  <video id="div_block-207-1652" class="ct-div-block" playsinline muted autoplay loop>
        <!-- H.264编码的MP4，全浏览器兼容 -->
        <source type="video/mp4" src="你的H.264版本MP4文件地址">
        <!-- VP9编码的WebM，给Chrome/Firefox等支持的浏览器 -->
        <source type="video/webm" src="https://www.ledrabrands.com/alphabet-lighting/wp-content/uploads/sites/2/2022/10/masked-bottom_1-vp9-chrome.webm">
  </video>
</div>

方案二：JS动态适配浏览器（针对HEVC需求） #

如果你一定要保留HEVC编码的MP4给Safari（比如追求更小的文件体积），可以用JS检测浏览器类型，动态设置视频源：

const videoEl = document.getElementById('div_block-207-1652');
// 简单检测Safari浏览器
const isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

if (isSafariBrowser) {
  videoEl.src = 'https://www.ledrabrands.com/alphabet-lighting/wp-content/uploads/sites/2/2022/10/masked-bottom_1-hevc-safari.mp4';
} else {
  videoEl.src = 'https://www.ledrabrands.com/alphabet-lighting/wp-content/uploads/sites/2/2022/10/masked-bottom_1-vp9-chrome.webm';
}

这种方式不需要嵌套source标签，直接给video设置src即可，精准适配不同浏览器。

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