如何实现不在viewport内的视频停止加载以节省带宽

这个需求完全可以实现，整套逻辑不需要特殊黑科技，全是浏览器标准支持的能力，而且能严格做到只控制资源加载、不干涉视频本身的播放/暂停状态。

核心逻辑就是主动接管视频资源的请求发起和终止权限，不要让浏览器自主决定资源拉取时机：

• 初始渲染阶段直接切断非首屏视频的默认加载
  所有视频标签初始不要写src属性，也不要提前放置<source>子节点，把真实的视频地址存在data-src这类自定义属性上，同时给标签加上preload="none"属性，明确告诉浏览器初始状态下不要请求这个视频的任何资源——这一步直接解决页面刚打开时浏览器并发拉取30个高清视频的问题。
• 用Intersection Observer监听元素视口状态
  不要用scroll事件做监听，性能差容易造成滚动卡顿，这个原生API专门用于元素可见性检测，性能开销极低，给每个视频绑定观察器即可，触发阈值可以按需调整，比如设置为10%的视频面积进入视口就触发逻辑：
  • 视频进入视口时：把data-src里存的真实地址赋值给video的src属性，动态插入<source>节点也可以，之后调用video.load()触发资源加载，浏览器就会开始拉取当前待观看的视频流。
  • 视频离开视口时：不要只调用pause()——暂停只是停止画面和音频播放，浏览器后台还是会继续缓冲内容占用带宽。要真正终止加载，直接清空video的src属性，再调用一次video.load()，浏览器会立刻中断这个视频所有未完成的资源请求，把带宽腾给当前视口内的视频。
• 流媒体场景补充兼容处理
  如果你用的是HLS、DASH这类分片加载的流媒体，离开视口时先调用对应播放器实例的中断方法（比如hls.js的stopLoad()），再清空src，避免底层的分片请求没被掐断还在后台运行。

别指望靠preload="metadata"解决问题，这个属性只是告诉浏览器优先加载视频元数据，不少浏览器在带宽有富余的时候还是会偷偷预加载部分视频分片，没法完全阻断非视口视频的带宽占用。
不要把暂停播放和终止加载搞混：pause()方法只暂停媒体播放，后台的资源缓冲逻辑不会停止，根本达不到节省带宽的效果。

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