单页应用移除视频父节点后，如何终止视频后台下载？

问题背景 #

站点为基于H3协议的单页应用，页面内通过IntersectionObserver实现视频进入视口自动播放。路由切换后，原页面所有节点被移除，新页面无video标签，但已启动下载的视频仍在后台占用带宽，导致新请求阻塞、渲染受阻。

已尝试的无效方案：

• 仅暂停视频并清空<source>的src：无法终止已发起的下载请求
• 调用window.stop()：会终止所有异步请求，影响业务接口

可行解决方案 #

在路由切换、移除父节点之前，对所有video元素执行以下操作，彻底终止下载并释放资源：

document.querySelectorAll("video").forEach(video => {
  // 暂停播放
  video.pause();
  
  // 移除所有关联的source标签
  Array.from(video.querySelectorAll("source")).forEach(source => source.remove());
  
  // 清空video的src并强制加载空资源，终止当前下载任务
  video.src = "";
  video.load();
  
  // 处理通过srcObject绑定的媒体资源（如MediaSource、Blob）
  if (video.srcObject) {
    if (video.srcObject instanceof MediaSource) {
      video.srcObject.endOfStream();
    }
    video.srcObject = null;
  }
});

方案说明 #

1. 暂停播放：先停止视频播放，避免后续操作时的资源冲突
2. 移除source标签：防止浏览器尝试重新加载已配置的媒体源
3. 清空src并调用load()：这是终止下载的核心步骤——浏览器会放弃当前正在进行的媒体请求，转而加载空资源，直接中断原下载任务
4. 处理srcObject：如果视频通过srcObject绑定了MediaSource或Blob资源，需要主动关闭流并释放引用，避免资源泄漏

注意事项 #

• 务必在父节点被移除前执行这段代码，否则DOM节点被移除后可能无法访问到video元素
• 将代码挂载到单页应用的路由离开钩子（如React的useEffect cleanup、Vue的beforeUnmount）中，确保路由切换时自动触发

内容的提问来源于stack exchange，提问作者Mike Casan Ballester