如何实现HTML5 Video暂停时持续预加载媒体流？

这个问题确实很常见——默认情况下浏览器会在视频暂停时停止预加载，但像Youtube、Vimeo这类平台能保持后台缓冲，其实是通过手动控制媒体加载逻辑实现的。下面给你两种可行的方案，分别适用于不同场景：

方案一：使用Media Source Extensions（MSE）（推荐流媒体场景） #

MSE是现代浏览器提供的API，允许我们完全掌控媒体流的加载、缓冲和播放流程，这也是Youtube和Vimeo这类平台的核心实现方式。通过MSE，我们可以分段请求媒体数据，即使视频暂停也能继续加载后续片段。

代码示例 #

const video = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  // 根据你的视频编码格式设置MIME类型，这里以MP4为例
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  let currentChunkIndex = 1;
  const totalChunks = 10; // 假设你的视频分成了10个分段

  // 加载下一个媒体分段的函数
  function loadNextChunk() {
    if (currentChunkIndex > totalChunks) return;
    
    const chunkUrl = `your-media-url-chunk-${currentChunkIndex}.mp4`;
    fetch(chunkUrl)
      .then(res => res.arrayBuffer())
      .then(buffer => {
        // 等待当前缓冲区更新完成后再追加新数据
        if (!sourceBuffer.updating) {
          sourceBuffer.appendBuffer(buffer);
          currentChunkIndex++;
          // 不管视频是否暂停，继续加载下一段
          loadNextChunk();
        } else {
          // 如果缓冲区正在更新，监听updateend事件后再继续
          sourceBuffer.addEventListener('updateend', () => {
            sourceBuffer.appendBuffer(buffer);
            currentChunkIndex++;
            loadNextChunk();
          }, { once: true });
        }
      })
      .catch(err => console.error('加载分段失败:', err));
  }

  // 启动初始加载
  loadNextChunk();

  // 确保暂停时不会中断加载（其实上面的逻辑已经保证了，这里做双重保险）
  video.addEventListener('pause', () => {
    if (!sourceBuffer.updating && currentChunkIndex <= totalChunks) {
      loadNextChunk();
    }
  });
});

方案说明 #

• 需要服务器支持媒体分段（比如HLS、DASH格式），或者你自己将视频切割成多个小片段
• 完全控制缓冲逻辑，可以自定义预加载的长度（比如只预加载当前位置后5分钟的内容），避免浪费带宽和内存
• 兼容性：现代浏览器（Chrome、Firefox、Safari 10+、Edge）都支持MSE

方案二：利用Fetch+Range请求（适合单个视频文件） #

如果你的视频是单个完整文件，不需要流媒体分段，可以通过fetch结合HTTP Range请求来手动预加载后续内容，利用浏览器缓存实现暂停时的后台缓冲。

代码示例 #

const video = document.querySelector('video');
let preloadAbortController = null;

// 监听暂停事件，启动预加载
video.addEventListener('pause', () => {
  if (!video.duration || preloadAbortController) return;

  // 获取当前已缓冲的最后位置（秒）
  const bufferedEnd = video.buffered.length > 0 
    ? video.buffered.end(video.buffered.length - 1) 
    : 0;
  const remainingDuration = video.duration - bufferedEnd;

  // 只预加载后续5分钟的内容，避免过度消耗带宽
  const preloadDuration = Math.min(remainingDuration, 300);
  if (preloadDuration <= 0) return;

  // 估算需要请求的字节范围（这里需要知道视频的总字节数，或者用服务器返回的Content-Length）
  // 如果你能拿到视频的总字节数，可以更精准计算：
  // const totalBytes = ...;
  // const startByte = Math.floor((bufferedEnd / video.duration) * totalBytes);
  
  // 这里简化处理，直接请求从当前缓冲位置之后的所有字节
  preloadAbortController = new AbortController();
  fetch(video.src, {
    headers: { 'Range': `bytes=${Math.floor(bufferedEnd * 1024 * 1024)}-` }, // 这里的字节数估算仅作示例，建议根据实际情况调整
    signal: preloadAbortController.signal,
    cache: 'force-cache'
  })
  .then(res => res.blob())
  .then(() => {
    // 下载的内容会被浏览器缓存，主视频播放时会自动读取缓存
    preloadAbortController = null;
  })
  .catch(err => {
    if (err.name !== 'AbortError') {
      console.error('预加载失败:', err);
    }
    preloadAbortController = null;
  });
});

// 播放时停止预加载（可选，因为播放时浏览器会自动管理预加载）
video.addEventListener('play', () => {
  if (preloadAbortController) {
    preloadAbortController.abort();
    preloadAbortController = null;
  }
});

方案说明 #

• 依赖服务器支持HTTP Range请求（大部分现代服务器都支持）
• 利用浏览器缓存，不需要修改主视频的src，实现简单
• 可以通过限制预加载时长来平衡用户体验和带宽消耗

注意事项 #

• 浏览器会有内置的缓冲内存限制，即使你手动预加载，也不会无限缓存整个视频，防止占用过多系统资源
• 移动端需要注意用户的流量消耗，建议在WiFi环境下才开启后台预加载，或者提供开关让用户选择
• 测试时要注意浏览器的缓存策略，避免重复请求相同内容

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