纯JavaScript实现屏幕尺寸适配视频源失效问题及视频重复加载疑问

你遇到的这两个问题其实都有明确的解决方案，我来帮你拆解分析：

一、纯JavaScript版本视频源不加载的原因及修复 #

你原来的纯JS代码里，直接用mainVideo.append("<source...>")的方式添加字符串形式的标签，虽然能在DOM里看到，但video元素并不会自动识别并加载这个新添加的源——因为这种方式只是插入了HTML文本，没有触发video的资源加载逻辑。

正确的做法是创建真正的<source>DOM元素节点，添加到video里后，还要调用load()方法让video重新加载资源。另外，别忘了处理窗口大小变化的情况，不然用户调整窗口后视频源不会跟着切换。修正后的代码如下：

const mainVideo = document.getElementById("myVideo");
const medi = "/videos/ground_540p.mp4";
const large = "/videos/ground_1080p.mp4";

// 封装切换视频源的函数
function switchVideoSource() {
  // 先清除已有的source标签，避免重复添加
  while (mainVideo.firstChild) {
    mainVideo.removeChild(mainVideo.firstChild);
  }

  let sourceUrl;
  if (window.innerWidth >= 1080) {
    sourceUrl = large;
  } else if (window.innerWidth >= 720) {
    sourceUrl = medi;
  }

  if (sourceUrl) {
    const source = document.createElement("source");
    source.src = sourceUrl;
    source.type = "video/mp4";
    mainVideo.appendChild(source);
    // 让video加载新的源
    mainVideo.load();
  }
}

// 页面加载时执行一次
switchVideoSource();

// 监听窗口 resize 事件，动态切换
window.addEventListener("resize", switchVideoSource);

这样修改后，video元素能正确识别新添加的source并加载对应的视频资源，而且窗口大小变化时也能自动切换。

二、HTML原生media属性方案是否会重复加载？ #

你后来改用的HTML原生方案是更优的选择！这种方式完全不需要JS，浏览器会自动根据当前视口尺寸匹配对应的<source>标签，只会加载符合media查询条件的那个视频源，不会同时加载多个，所以不用担心重复加载的问题。

这个方案的优势很明显：

• 浏览器原生支持，兼容性更好
• 代码更简洁，不需要维护JS逻辑
• 性能更优，浏览器会提前判断合适的源，避免不必要的资源请求

另外，建议你补充一个默认的source（不加media属性），确保在小屏幕设备上也有对应的视频源：

<div class="video-section">
  <div id="video-wrapper">
    <video autoplay muted loop id="myVideo" preload="auto">
      <source src="/videos/ground_1080p.mp4" media="(min-width: 1200px)" />
      <source src="/videos/ground_540p.mp4" media="(min-width: 768px)" />
      <!-- 小屏幕默认源 -->
      <source src="/videos/ground_360p.mp4" />
      I'm sorry; your browser doesn't support HTML video.
    </video>
  </div>
</div>

备注：内容来源于stack exchange，提问作者Malte K