Could not append segments by Media Source API, get “InvalidStateError : An attempt was made to use an object that is not, or is no longer, usable

I use following sample program to append media files, but get “Uncaught InvalidStateError : An attempt was made to use an object that is not, or is no longer, usable” error at the first instant it hits code “mediaSource.sourceBuffers[0].appendBuffer(mediaSegment);”. I am using Chrome 31.0.1650.57. Can anyone advice me to resolve this?

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

  • Javascript HTML5 play() not working in ios9 Safari?
  • Display fallback image even if the browser supports html5 video
  • Why does html5-video event timeupdate fires twice on chrome browser?
  • Live video broadcasting
  • Difference between canPlayType maybe and probably output
  • Video.js - multiple mp4 videos on single page using Flash
  • I have done following modification to append files.

    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;
    }

    And changed

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

    And

    sourceBuffer.append(initSegment);
    to
    sourceBuffer.appendBuffer(initSegment);

    As append method is not working in my environment.

    And I use sourceopen instead of webkitsourceopen inside window.setTimeout() event.

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

  • Change Video (Different quality) file in html5 through Jquery
  • How to detect supported video formats for the HTML5 video tag?
  • How to create a frame-accurate video sequencer with HTML5 <video>?
  • Unable to append to source buffer
  • Small player appears in top-left corner before BigVideo.js loads
  • Get frame change in video HTML5
  • 2 Solutions collect form web for “Could not append segments by Media Source API, get “InvalidStateError : An attempt was made to use an object that is not, or is no longer, usable”

    The problem is that after you append data, the SourceBuffer instance becomes temporarily unusable while it’s working. During this time, the SourceBuffer‘s updating property will be set to true, so it’s easy to check for.

    But probably the simplest way to deal with this is to listen to the updateend event, and just queue up all your buffers and only append them when the SourceBuffer tells you it’s ready for a new one. Like this:

    // 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);
    

    Keep in mind that in order for the first event to fire, you need to append the first buffer manually, rather than pushing to queue. After that, just dump everything into the array.

    Have you found the answer? Same problem here 🙁

    I have a temporary solution which is setting setTimeout for each buffer append since you have to wait for previous buffer to finish updating (sourceBuffer.updating == false). The code may look like this:

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