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

【问题标题】：Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null无法在“SourceBuffer”上执行“appendBuffer”：HTMLMediaElement.error 属性不为空
【发布时间】：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); });找出是否与视频标签错误有关

标签： javascript android html android-webview media-source

【解决方案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);

【讨论】：