SourceBuffer.appendBuffer()无法写入ArrayBuffer致视频无法播放求助

背景信息 #

• 后端通过Spring Boot的StreamingResponseBody返回字节范围，响应码为206（部分内容请求）
• 对比chrome://media-internals/日志与YouTube播放日志，确认数据接收逻辑合理
• 前端通过response.arrayBuffer()将字节流转为ArrayBuffer
• 视频编码格式为video/mp4; codecs="avc1.64002a,mp4a.40.2"; profiles="mp42,mp41"，已通过MediaSource.isTypeSupported验证Chrome支持该格式

当前问题 #

• buffered的TimeRange无更新，sourceBuffer.buffered.start(0)和end(0)始终为undefined
• 视频无法播放，fetchNextSegment()未触发

代码片段 #

getVideoStreamResourceAPI(pathVariables, identityPayload, resp => {
    const mediaSource = new MediaSource();
    videoRef.current.src = URL.createObjectURL(mediaSource);
    mediaSource.addEventListener('sourceopen', sourceOpen, {once: true});

    function sourceOpen() {
        URL.revokeObjectURL(videoRef.current.src);
        var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64002a,mp4a.40.2"; profiles="mp42,mp41"');

        sourceBuffer.addEventListener('update', sourceBufferUpdate, { once: true });
        sourceBuffer.appendBuffer(resp);
        sourceBuffer.addEventListener('updateend', updateEnd, { once: true });
    }

    function sourceBufferUpdate(e) {
        console.log("updated: ", e);
    }

    function updateEnd(e) {
        console.log("updatedEnded: ", e);
        console.log("buffered: ", videoRef.current.buffered);
        videoRef.current.addEventListener('playing', fetchNextSegment, { once: true });
    }

    function fetchNextSegment() {
        console.log("fetching next segment");
    }

    setSpinner(null);
});

排查与解决思路 #

1. 先查MP4片段是否为fMP4格式 #

MediaSource只认碎片化MP4（fMP4），必须是带moof/mdat结构的片段，不能是完整的带moov头的MP4文件。

• 用MP4Box解析收到的字节流对应的文件，验证格式：

  mp4box -info your_segment.mp4
  

  如果输出里找不到moof相关信息，说明后端返回的格式不符合要求，需要调整为输出fMP4。

2. 修正SourceBuffer的MIME类型 #

代码里的MIME类型用了转义引号"，容易出问题，直接用正常引号即可；另外profiles参数不是标准MIME的必填项，很多浏览器不兼容，建议移除：

var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64002a,mp4a.40.2"');

3. 加上错误监听捕获异常 #

当前代码没有监听错误事件，片段解析失败也无法察觉，赶紧补上：

// 监听SourceBuffer错误
sourceBuffer.addEventListener('error', (e) => {
    console.error('SourceBuffer异常:', e);
    console.error('错误详情:', sourceBuffer.error);
});

// 监听MediaSource全局错误
mediaSource.addEventListener('sourceerror', (e) => {
    console.error('MediaSource异常:', e);
});

4. 确认片段时间戳是否有效 #

如果片段没有正确的时间戳，MediaSource无法识别时间范围，buffered自然为空。用MP4Box查看时间戳信息：

mp4box -dump your_segment.mp4

检查输出中tkhd（轨道头）和mdhd（媒体头）的时间信息，确保连续且有效。

5. 手动触发播放测试 #

有时候缓冲了数据，视频也不会自动播放，在updateEnd中手动调用播放，同时排查浏览器自动播放限制（部分浏览器需要用户交互才能触发播放）：

function updateEnd(e) {
    console.log("updatedEnded: ", e);
    console.log("buffered: ", videoRef.current.buffered);
    // 手动触发播放并捕获错误
    videoRef.current.play().catch(err => console.error('播放失败:', err));
    videoRef.current.addEventListener('playing', fetchNextSegment, { once: true });
}

6. 验证ArrayBuffer完整性 #

检查resp.byteLength是否和后端返回的Content-Length一致，避免数据截断或损坏：

function sourceOpen() {
    URL.revokeObjectURL(videoRef.current.src);
    console.log('接收的字节长度:', resp.byteLength); // 新增打印
    var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64002a,mp4a.40.2"');
    // ...后续代码不变
}

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