基于 IntersectionObserver API 实现视频延迟加载

核心代码

    let observer  = null; // 观察者
    let videoDoms = []; // 存储视频元素
    let videoList = ['path/to/video1.mp4', 'path/to/video2.mp4', 'path/to/video3.mp4',]; // 示例
   /**
     * 观察视频元素是否在视口内
     */
    function observerVideo() {
      // 使用 Intersection Observer API 来检测视频元素是否在视口内
      observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          const videoElement = entry.target
          if (entry.isIntersecting) {
            // 当视频出现在视口时，设置视频源并加载
            videoElement.src = videoElement.dataset.src // 替换为实际视频地址
            videoElement.load()
            observer.unobserve(videoElement) // 加载视频后停止观察

            videoDoms.push(videoElement) // 存储视频元素
          } else {
            videoElement.pause() // 当视频离开视口时，暂停播放
            videoElement.src = '' // 清除视频源
          }
        })
      })

      // 观察视频元素
      videoList.forEach((v, index) => {
        const vElement = document.getElementById(`video${index}`)
        if (vElement) {
          observer.observe(vElement)
        }
      })
    }
    /**
     * 取消视频加载
     */
   function cancelVideo() {
      videoDoms.forEach(item => {
        item.src = ''
        item.pause()
      })
      videoDoms = []
    }
    /**
     * 取消观察
     */
   function clearObserver() {
      observer && observer.disconnect() // 停止观察
      observer = null
    }

原生html使用

document.addEventListener("DOMContentLoaded", () => {
    observerVideo()
})
// 清理观察者和视频元素（例如，当组件卸载时） 
window.addEventListener("unload", () => { 
    clearObserver; // 取消观察
    cancelVideo(); // 取消加载视频 
});

vue中使用

onMounted(() => {
   observerVideo() 
})
onUnMounted(() => {
   clearObserver(); // 取消观察
   cancelVideo(); // 取消加载视频 
})