title: Video 'Stuck' when using Media Source Extension API
body: <p>I have had little luck getting my own implementation using the Media Source API to work.</p>
  
  <p>I just decided to see if a working example could work properly locally, so I copy &amp; pasted the source code from the example:
  <a href="http://html5-demos.appspot.com/static/media-source.html" rel="nofollow">http://html5-demos.appspot.com/static/media-source.html</a></p>
  
  <p>Source:
  view-source:<a href="http://html5-demos.appspot.com/static/media-source.html" rel="nofollow">http://html5-demos.appspot.com/static/media-source.html</a></p>
  
  <p>I dont have the 'test.webm' video so I can to use my own .webm video file.
  The test file I am using is a .webm video file 14.6m </p>
  
  <p>The result was that it did not work exactly the same. 
  Checking the console I can see there were some errors so I added a queue to collect the video chunks while the sourceBuffer from media source was updating. </p>
  
  <p>This helped fixed the errors &amp; I can see the video fully loaded on the player but the issue is that the video just never starts playing. It's just a black screen that shows the length time of the video.</p>
  
  <p>If I manually move it to the 1 second start point it'll play all the way to the end. I am assuming this means the implementation worked correctly. Checking the video.paused bool of the video while it has a black screen comes back as false too. Not sure if this is just an issue with the html video at this point. </p>
  
  <p>Here is my update to the example's script:</p>
  
  <pre><code>&lt;script&gt;
  var FILE = 'test.webm';
  // var FILE = 'perigny.mp4';
  var NUM_CHUNKS = 10;
  var video = document.querySelector('video');
  finished = false;
  
  window.MediaSource = window.MediaSource || window.WebKitMediaSource;
  if (!!!window.MediaSource) {
    alert('MediaSource API is not available');
  }
  
  var mediaSource = new MediaSource();
  
  video.src = window.URL.createObjectURL(mediaSource);
  
  function callback(e) {
    console.log("video.paused: ", video.paused);
  
    var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    // sourceBuffer = mediaSource.addSourceBuffer('video/mp4;codecs="avc1.4d001e"');
  
    queue = [];
  
    sourceBuffer.addEventListener('updatestart', 
      function(e) { console.error('updatestart: ' + mediaSource.readyState);});
    sourceBuffer.addEventListener('update', 
      function(e) { 
        console.log('update: ' + mediaSource.readyState);
      });
    sourceBuffer.addEventListener('updateend', function() { // Note: Have tried 'updateend'
      console.log('updateend: ' + mediaSource.readyState);
        if (queue.length &gt; 0 &amp;&amp; !sourceBuffer.updating) {
          console.error("queue.shift");
        // if (queue.length) {
          sourceBuffer.appendBuffer(queue.shift());
        }
        if (finished &amp;&amp; !sourceBuffer.updating) {
          console.log("finished");
          mediaSource.endOfStream();
          console.log("MediaSource", mediaSource);
          console.log("video.paused: ", video.paused);
  
          video.pause();
          video.play();
        }
    }, false);
  
    logger.log('mediaSource readyState: ' + this.readyState);
  
    GET(FILE, function(uInt8Array) {
      var file = new Blob([uInt8Array], {type: 'video/webm'});
      var chunkSize = Math.ceil(file.size / NUM_CHUNKS);
  
      logger.log('num chunks:' + NUM_CHUNKS);
      logger.log('chunkSize:' + chunkSize + ', totalSize:' + file.size);
  
      // Slice the video into NUM_CHUNKS and append each to the media element.
      var i = 0;
  
      (function readChunk_(i) {
        var reader = new FileReader();
  
        // Reads aren't guaranteed to finish in the same order they're started in,
        // so we need to read + append the next chunk after the previous reader
        // is done (onload is fired).
        reader.onload = function(e) {
          console.log("i", i);
          if (sourceBuffer.updating || queue.length &gt; 0) {
            console.log("addSourceBuffer is updating");
            queue.push(new Uint8Array(e.target.result));
          }
          else {
            console.log("sourceBuffer.appendBuffer();");
            sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
          }
  
          logger.log('appending chunk:' + i);
          if (i == NUM_CHUNKS - 1) {
            console.log("End of stream");
            finished = true;
            // if (!sourceBuffer.updating)
            //   mediaSource.endOfStream();
          } else {
            if (video.paused) {
              video.play(); // Start playing after 1st chunk is appended.
            }
            readChunk_(++i);
          }
        };
  
        var startByte = chunkSize * i;
        var chunk = file.slice(startByte, startByte + chunkSize);
  
        reader.readAsArrayBuffer(chunk);
      })(i);  // Start the recursive call by self calling.
    });
  }
  
  mediaSource.addEventListener('sourceopen', callback, false);
  mediaSource.addEventListener('webkitsourceopen', callback, false);
  
  mediaSource.addEventListener('sourceended', function(e) {
    logger.log('mediaSource readyState: ' + this.readyState);
  }, false);
  
  function GET(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer';
    xhr.send();
  
    xhr.onload = function(e) {
      if (xhr.status != 200) {
        alert("Unexpected status code " + xhr.status + " for " + url);
        return false;
      }
      callback(new Uint8Array(xhr.response));
    };
  }
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p>Edit: In hopes of helping others that may come across this issue, let me add the solution/outcome. </p>
  
  <p>It turns out that it was a key framing issue with the original .webm video file that I was trying to use. Seems like the like the MSE API is very picking even when it's the exact file format it requires.
  I ended up downloading the .webm video from:
  <a href="http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5" rel="nofollow">http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5</a></p>
  
  <p>I plan to continue playing around with these other file formats now. </p>