大视频分片追加至BLOB连续播放：MediaSource API及无缝播放问题求助

首先，你之前遇到的MediaSource API问题，是因为依赖了过时的webkit前缀特性（比如webkitMediaSourceURL），现代主流浏览器已经全面支持标准的MediaSource API，完全可以用它来实现无间隙的分片视频播放——替代那种“等前一个分片播放完再加载下一个”的方案（后者必然会产生加载间隙）。

核心实现思路 #

利用标准MediaSource API创建一个统一的媒体流缓冲区，将视频分片按顺序追加到缓冲区中，浏览器会自动衔接播放缓冲区里的内容，不需要等待上一个分片播放结束再加载下一个，从根源上避免播放间隙。

完整代码示例 #

下面是基于标准MediaSource的无缝分片播放实现，假设你的视频分片是同编码格式的WebM文件：

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

// 定义要加载的分片URL列表
const chunkUrls = ['webm-chunk1', 'webm-chunk2'];
let currentChunkIndex = 0;

mediaSource.addEventListener('sourceopen', async () => {
  // 根据视频编码创建SourceBuffer，这里以WebM为例，MIME类型必须匹配你的视频实际编码
  const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8, vorbis"');
  
  // 递归加载并追加分片的函数
  async function loadNextChunk() {
    if (currentChunkIndex >= chunkUrls.length) {
      // 所有分片加载完成，标记流结束
      mediaSource.endOfStream();
      return;
    }
    
    const chunkUrl = chunkUrls[currentChunkIndex];
    currentChunkIndex++;
    
    // 获取分片的二进制数据
    const response = await fetch(chunkUrl);
    const chunkBlob = await response.blob();
    const chunkBuffer = await chunkBlob.arrayBuffer();
    
    // 等待SourceBuffer处于可追加状态（避免并发追加报错）
    while (sourceBuffer.updating) {
      await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }));
    }
    
    // 将分片数据追加到缓冲区
    sourceBuffer.appendBuffer(chunkBuffer);
    
    // 提前加载下一个分片，保证播放时缓冲区不会耗尽
    loadNextChunk();
  }
  
  // 启动第一个分片的加载
  loadNextChunk();
  
  // 触发视频播放
  video.play().catch(err => console.error('播放启动失败:', err));
});

关键注意事项 #

• MIME类型必须匹配：addSourceBuffer中的MIME类型要和视频的编码完全对应，比如H.264编码的MP4应该用'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'，可以通过视频文件的属性查看编码信息。
• 分片参数一致性：所有视频分片必须使用相同的编码、分辨率、帧率、码率，否则追加时会触发错误。
• 预加载机制：在当前分片播放过程中就加载下一个，避免缓冲区空了导致播放中断。
• 错误处理：实际使用中可以添加sourceBuffer.onerror、mediaSource.onerror等监听，处理加载或播放异常。

成熟开源库替代方案 #

如果不想自己实现底层逻辑，推荐使用封装好的开源流媒体库：

• hls.js：专注于HLS格式的流媒体播放，内置分片无缝加载、自适应码率等特性，兼容性极强。
• dash.js：针对DASH格式的流媒体实现，同样支持无缝分片播放，适合复杂的流媒体场景。

这些库已经封装了MediaSource API的细节，提供了更完善的播放控制和错误处理能力。

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