无法在“SourceBuffer”上执行“appendBuffer”：HTMLMediaElement.error 属性不为空

Posted 2023-02-19

【中文标题】无法在“SourceBuffer”上执行“appendBuffer”：HTMLMediaElement.error 属性不为空

【英文标题】：Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null

【发布时间】：2017-12-06 12:58:01

【问题描述】：

我正在尝试通过 socket.io 将视频文件流式传输到我的客户端（当前使用 Chrome 作为客户端）。 我只得到视频的第一帧，然后出现 Failed to appendBuffer：

无法在“SourceBuffer”上执行“appendBuffer”： htmlMediaElement.error 属性不为空

部分JS代码：

   if (buffer.updating || queue.length > 0) 
        console.log("buffer.updating = " + buffer.updating  + " queue.length  = "  + (queue.length));
            queue.push(videoData);
         else 
        console.log("else buffer.updating = " + buffer.updating  + " queue.length = "  + (queue.length));
            buffer.appendBuffer(videoData);
        

    
;

var play = function() 

    //var mimeType = `video/mp4;codecs="$$scope.codec"`;
    var mimeType = 'video/mp4;codecs="' + codec +'"';

    console.log("mimetype = " + mimeType + " is supported = " + MediaSource.isTypeSupported(mimeType));

    buffer = mediaSource.addSourceBuffer(mimeType);

    buffer.addEventListener('update', function () 
        if (queue.length > 0 && !buffer.updating) 
            console.log("buffer.appendBuffer");
            buffer.appendBuffer(queue.shift());
        
    );



    video.play();
;

请帮帮我！

【问题讨论】：

有人，请帮帮我？

嘿，莫蒂，你发现了吗？

很遗憾，我暂时没有解决方案，如果您有任何想法，我会很乐意倾听...

此外，如果是 Chrome，您可以在 chrome://media-internals/ 中查看视频元素后面的实际播放器日志

我认为您的问题与视频标签有关，也许您缺少 src 或类似的东西，您可以尝试通过document.getElementById('videoElementId').addEventListener('error',function(e) console.error(e); );找出是否与视频标签错误有关

【参考方案1】：

当源缓冲区仍在更新并且您调用 appendBuffer 将另一个缓冲区附加到它时，可能会发生这种情况。您应该等待调用的 updateend 事件，然后您可以附加另一个缓冲区。您可以使用 Promise 让 await 函数等待它解决，然后像这样附加另一个缓冲区：

const sourceBuffer = mediaSource.addSourceBuffer(mimeType);

const loadBuffer = (buffer) => 
  return new Promise((resolve)=>
    sourceBuffer.addEvenListener('updateend',() resolve);
    sourceBuffer.append(buffer);
  );
;

await loadBuffer(buffer1);
await loadBuffer(buffer2);