Javascript MediaSource:Uncaught InvalidStateError:无法执行'；追加缓冲区'；在'；SourceBuffer'；：此SourceBuffer已被删除

我正在尝试第一个演示MediaSource试用版，但我无法播放视频。我使用的是一个webm视频“big-buck-bunny_trailer.webm”。我不断收到“Uncaught InvalidStateError:未能在“MediaSource”上执行“endOfStream”：此MediaSource的一个或多个源缓冲区上的“Update”属性为true。“”。我也处理了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();

window.URL=window.URL | | window.webkitURL；
window.MediaSource=window.MediaSource | | window.WebKitMediaSource；
如果（！！！window.MediaSource）{
//处理回退
警报（“MediaSource API不可用”）；
}
var mediaSource=新的mediaSource（）；
var源缓冲区；
var音频；
var playRange=0；
变量队列=[]；
var=false；
var contentLength=未定义；
函数ajaxMediaGET（url、范围、异步、回调）{
var xhr=new XMLHttpRequest（）；
xhr.open（“GET”，url）；
xhr.responseType=“arraybuffer”；
setRequestHeader（“范围”，范围）；
xhr.addEventListener（'load'，onLoad，false）；
xhr.send（）；
函数onLoad（）{
playRange+=数字（xhr.getResponseHeader（“内容长度”）；
如果（！contentLength）{
var contentLengthString=xhr.getResponseHeader（“内容范围”）.split（“/”）；
contentLength=Number（contentLengthString[1]）；
}
//回调（新的Uint8Array（xhr.response））；
addEventListener（“更新”，函数（）{
如果（！sourceBuffer.updateing&&queue.length>0）{/&&mediaSource.readyState==“打开”
appendBuffer（queue.shift（））；
sourceBuffer.removeEventListener（“更新”）；
}
}，假）；
如果（！sourceBuffer.update）{
appendBuffer（新的Uint8Array（xhr.response））；
}否则{
push（新的Uint8Array（xhr.response））；
}
如果（播放范围<内容长度-1）{
ajaxMediaGET（“服务器路径”，loadNextRange（playRange），true，未定义）；
}否则{
mediaSource.endOfStream（）；
}
}
}
函数mediaSourceOpen（e）{
sourceBuffer=e.target.addSourceBuffer（'video/webm；codecs=“vp8，vorbis”）；
ajaxMediaGET（“服务器路径”，loadNextRange（playRange），true，未定义）；
/*如果（！玩）{
音频播放（）；
玩=真；
}*/
}
函数initPlayer（）{
音频=document.querySelector（“视频”）；
audio.src=window.URL.createObjectURL（mediaSource）；
addEventListener（'sourceopen'，mediaSourceOpen，false）；
addEventListener（'webkitsourceopen'，mediaSourceOpen，false）；
}
initPlayer（）；

您需要等待sourceBuffer完成更新。替换mediaSource.endOfStream（）；与

if（播放范围

请看一下文档和示例代码

---

chrome://media-internals/ 获取错误，意外的元素ID 0x45df 00:00:05 667错误媒体：：源状态：：追加：流解析失败。数据大小=61441 append_window_start=0 append_window_end=1.#INF.任何我不知道的想法.webm，但是如果您想在

mp4

容器中使用MSE和

h264

，则必须给出视频的

sourceBuffer

特定部分（即带有

moov

框的初始化段和带有

moof+mdat

框的视频段）。当然，您需要遵循.webm内容的特殊格式才能正确使用MSE。

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