视频缓冲中断问题：4个视频预加载完成后无法隐藏预加载层

问题分析 #

你遇到的核心问题是依赖canplay+定时器轮询、canplaythrough事件的方案均不可靠，原因如下：

• buffered.end(0)仅返回第一个缓冲区间的结束位置，若缓冲中断后继续加载，后续的缓冲区间不会被检测到，导致误判未完成。
• canplaythrough事件由浏览器自主决定触发时机，当浏览器认为无需完全加载就能流畅播放时，不会触发该事件，导致部分视频无法被标记为完成。

解决方案 #

改用监听progress事件实时检测缓冲状态，同时正确判断整个视频是否被完全缓冲，维护一个完成计数器，所有视频完成后隐藏预加载层。

完整代码 #

const preloadOverlay = document.querySelector('#preload');
const videos = document.querySelectorAll('video');
let fullyLoadedCount = 0;

// 判断视频是否已完全缓冲的工具函数
function isVideoFullyLoaded(video) {
  if (!video.duration) return false; // 时长未加载时直接返回false
  const buffered = video.buffered;
  // 遍历所有缓冲区间，检查是否有区间覆盖整个视频时长
  for (let i = 0; i < buffered.length; i++) {
    if (buffered.start(i) <= 0 && buffered.end(i) >= video.duration) {
      return true;
    }
  }
  return false;
}

// 单个视频的缓冲完成检测逻辑
function checkVideoLoadStatus(video) {
  if (isVideoFullyLoaded(video)) {
    // 防止重复计数
    if (!video.dataset.loaded) {
      video.dataset.loaded = 'true';
      fullyLoadedCount++;
      // 所有视频完成后隐藏预加载层
      if (fullyLoadedCount === videos.length) {
        preloadOverlay.classList.add('hide');
        // 可添加你的自定义逻辑
        // layoutAnimation(timeoutClassRemover);
      }
    }
  }
}

// 初始化每个视频的监听
videos.forEach(video => {
  // 缓冲数据更新时触发检测
  video.addEventListener('progress', () => checkVideoLoadStatus(video));
  // 视频元数据加载完成后触发一次检测，避免遗漏已缓冲完成的视频
  video.addEventListener('loadedmetadata', () => checkVideoLoadStatus(video));
});

代码说明 #

1. isVideoFullyLoaded工具函数：遍历视频的所有缓冲区间，确认是否存在从0开始并覆盖到总时长的区间，解决了缓冲中断后多区间的检测问题。
2. 计数器fullyLoadedCount：通过dataset标记已完成的视频，避免重复计数，确保每个视频只被统计一次。
3. 事件监听：
   • progress事件：每次缓冲数据更新时触发，实时检测缓冲状态。
   • loadedmetadata事件：视频元数据（时长等）加载完成后触发检测，避免页面加载时已完成缓冲的视频被遗漏。

额外注意事项 #

• 确保视频的preload属性设置为auto，让浏览器主动预加载。
• 如果视频跨域，需配置CORS允许，否则buffered属性可能无法正常获取。

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