无法通过Media Source API附加细分,获取"InvalidStateError:尝试使用不可用或不再可用的对象

Question

我使用以下示例程序追加媒体文件,但得到"Uncaught InvalidStateError:尝试使用一个不可用或不再可用的对象"错误,它在第一个瞬间命中"mediaSource.sourceBuffers [0] .appendBuffer(mediaSegment);".我使用的是Chrome 31.0.1650.57.谁能建议我解决这个问题？

https://github.com/jbochi/media-source-playground/blob/master/test.html

我已完成以下修改以附加文件.

var buffer_len = 0;

function HaveMoreMediaSegments(){
//return false; //return buffers.length > 0;
return buffers.length > buffer_len;
}

//var GetNextMediaSegment = GetInitializationSegment;

function GetNextMediaSegment(){
var buffer = buffers[buffer_len];
buffers = buffers.slice(1);
buffer_len = buffer_len + 1;
return buffer;
}

并改变了

mediaSource.sourceBuffers [0] .append(mediaSegment);
to
mediaSource.sourceBuffers [0] .appendBuffer(mediaSegment);

和

sourceBuffer.append(ini​​tSegment);
to
sourceBuffer.appendBuffer(initSegment);

因为append方法在我的环境中不起作用.

我在window.setTimeout()事件中使用sourceopen而不是webkitsourceopen.

mediaSource.addEventListener('sourceopen',onSourceOpen.bind(this,video));

Answer 1

问题是在附加数据后,SourceBuffer实例在工作时暂时无法使用.在此期间,将SourceBuffer的updating属性将被设置为true,所以很容易检查.

但是处理这个问题最简单的方法可能就是收听updateend事件,然后将所有缓冲区排队,只有当它SourceBuffer告诉你它已准备好接受新缓冲区时才附加它们.像这样:

// store the buffers until you're ready for them
var queue = [];

// whatever normally would have called appendBuffer(buffer) can 
// now just call queue.push(buffer) instead

sourceBuffer.addEventListener('updateend', function() {
  if ( queue.length ) {
    sourceBuffer.appendBuffer(queue.shift());
  }
}, false);

请记住,为了触发第一个事件,您需要手动附加第一个缓冲区,而不是推送到queue.之后,只需将所有内容转储到数组中.

Answer 2

你找到答案了吗？同样的问题在这里:(

我有一个临时解决方案，为每个缓冲区附加设置 setTimeout ，因为您必须等待前一个缓冲区完成更新（sourceBuffer.updating == false）。代码可能如下所示：

var i = 0;
stream.on('data', function (buffer) {
    setTimeout(function(){
        sourceBuffer.appendBuffer(buffer);
    }, (i++) * 200);
});