如何检测背景视频是否已加载？曾用imagesLoaded检测背景图

没问题！检测背景视频的加载状态其实和你用imagesLoaded检测图片的思路类似，只不过要利用视频元素本身的事件和属性，我给你整理几个实用的方案👇

1. 利用视频原生事件监听 #

HTML5的<video>元素提供了一系列加载相关的事件，你可以根据需求选择监听：

• loadeddata：视频第一帧加载完成时触发（适合只需要确认视频开始加载的场景）
• canplay：视频已加载到可以开始播放（至少能播放几帧）时触发
• canplaythrough：浏览器预估视频可以无缓冲播放完毕时触发，这个更接近“完全加载完成”的状态

给你个简单的代码示例：

// 获取背景视频元素
const bgVideo = document.querySelector('.bg-video');

// 监听完全加载完成的事件
bgVideo.addEventListener('canplaythrough', () => {
  console.log('背景视频已加载完成，可以流畅播放啦！');
  // 这里可以写你的后续逻辑，比如隐藏加载占位动画
});

// 别忘了监听加载失败的情况
bgVideo.addEventListener('error', (err) => {
  console.error('背景视频加载出错:', err);
});

2. 封装成类似imagesLoaded的工具函数 #

如果你想要一个像imagesLoaded那样批量处理、易用的工具，可以自己封装一个简单的函数：

function videosLoaded(videoSelector, onComplete) {
  const videos = document.querySelectorAll(videoSelector);
  let loadedCount = 0;
  const total = videos.length;

  // 如果没有匹配到视频，直接触发完成回调
  if (total === 0) {
    onComplete(true);
    return;
  }

  // 单个视频加载完成的处理函数
  function handleLoad() {
    loadedCount++;
    if (loadedCount === total) {
      onComplete(true);
    }
  }

  // 加载失败的处理
  function handleError() {
    onComplete(false);
  }

  videos.forEach(video => {
    // 检查视频是否已经加载完成（readyState >=4 表示HAVE_ENOUGH_DATA）
    if (video.readyState >= 4) {
      handleLoad();
    } else {
      video.addEventListener('canplaythrough', handleLoad);
      video.addEventListener('error', handleError);
    }
  });
}

// 使用示例
videosLoaded('.bg-video', (allLoadedSuccess) => {
  if (allLoadedSuccess) {
    console.log('所有背景视频都加载完成啦！');
  } else {
    console.log('有背景视频加载失败，请检查资源链接~');
  }
});

3. 几个注意点 #

• 如果你的背景视频是通过CSS背景实现的（这种情况很少见，一般都是用<video>标签作为背景层），抱歉这种方式无法监听加载状态，因为CSS背景不提供视频加载的事件接口，建议改用<video>标签实现背景视频
• 可以给视频元素设置preload="auto"，让浏览器在页面加载时预加载视频内容（不过这个属性的行为会受浏览器策略和网络环境影响）
• 如果视频用了懒加载，要确保在视频元素的src属性设置完成后再绑定监听事件，不然可能会错过加载事件

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