MediaSource：未捕获的 InvalidStateError：无法在“SourceBuffer”上执行“appendBuffer”：此 SourceBuffer 已被删除答案

【问题标题】：MediaSource: Uncaught InvalidStateError: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removedMediaSource：未捕获的 InvalidStateError：无法在“SourceBuffer”上执行“appendBuffer”：此 SourceBuffer 已被删除
【发布时间】：2015-03-02 17:07:44
【问题描述】：

我正在尝试使用第一个演示 MediaSource 进行尝试，但我无法播放视频。我使用的来源是一个 webm 视频“big-buck-bunny_trailer.webm”。我不断收到“Uncaught InvalidStateError: Failed to execute 'endOfStream' on 'MediaSource': The 'updating' attribute is true on a or more this MediaSource's SourceBuffers.”。我也处理了 sourcebuffer 更新标志，但它似乎仍然不起作用。

window.URL = window.URL || window.webkitURL;
window.MediaSource = window.MediaSource || window.WebKitMediaSource;
if (!!!window.MediaSource) {
    //handle fallback
    alert('MediaSource API is not available');
}
var mediaSource = new MediaSource();
var sourceBuffer;
var audio;
var playRange = 0;
var queue = [];
var playing = false;
var contentLength = undefined;

function ajaxMediaGET(url, range, async, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "arraybuffer";
    xhr.setRequestHeader("Range", range);
    xhr.addEventListener('load', onLoad, false);
    xhr.send();

    function onLoad() {
        playRange += Number(xhr.getResponseHeader("Content-Length"));
        if(!contentLength) {
            var contentLengthString = xhr.getResponseHeader("Content-Range").split("/");
            contentLength = Number(contentLengthString[1]);
        }
        //callback(new Uint8Array(xhr.response));

        sourceBuffer.addEventListener("update", function() {
            if(!sourceBuffer.updating && queue.length > 0) {// && mediaSource.readyState == "open"
                sourceBuffer.appendBuffer(queue.shift());
                sourceBuffer.removeEventListener("update");
            }
        }, false);

        if (!sourceBuffer.updating) {
            sourceBuffer.appendBuffer(new Uint8Array(xhr.response));
        } else {
            queue.push(new Uint8Array(xhr.response));
        }

        if(playRange < contentLength - 1) {
            ajaxMediaGET("path-to-server", loadNextRange(playRange), true, undefined);
        } else {
            mediaSource.endOfStream();
        }
    }
}

function mediaSourceOpen(e) {
    sourceBuffer = e.target.addSourceBuffer('video/webm;codecs="vp8,vorbis"');
    ajaxMediaGET("path-to-server", loadNextRange(playRange), true, undefined);
    /*if(!playing) {
        audio.play();
        playing = true;
    }*/
}

function initPlayer() {
    audio = document.querySelector('video');
    audio.src = window.URL.createObjectURL(mediaSource);
    mediaSource.addEventListener('sourceopen', mediaSourceOpen, false);
    mediaSource.addEventListener('webkitsourceopen', mediaSourceOpen, false);
}

initPlayer();

【问题讨论】：

试过 chrome://media-internals/ 出错，意外的元素 ID 0x45df 00:00:05 667 错误 media::SourceState::Append: 流解析失败。数据大小=61441 append_window_start=0 append_window_end=1.#INF。任何想法
我不知道.webm，但是如果你想在mp4容器中使用MSE和h264，你必须给sourceBuffer视频的特定部分（即带有moov 框的初始化段和带有moof+mdat 框的视频段）。当然，您需要遵循一种特殊的 .webm 内容格式才能正确使用 MSE。

标签： javascript html media-source mediastreamsource mpeg-dash

【解决方案1】：

您需要等到 sourceBuffer 完成更新。替换 mediaSource.endOfStream();与

if(playRange < contentLength - 1) {
    ajaxMediaGET("path-to-server", loadNextRange(playRange), true, undefined);
} else {
    sourceBuffer.addEventListener('updateend', function(){
        mediaSource.endOfStream();
    });
}

查看文档和示例代码 MediaSource.endOfStream()

【讨论】：