Video 'Stuck' when using Media Source Extension API

Question

I have had little luck getting my own implementation using the Media Source API to work.

I just decided to see if a working example could work properly locally, so I copy & pasted the source code from the example: http://html5-demos.appspot.com/static/media-source.html

Source: view-source:http://html5-demos.appspot.com/static/media-source.html

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

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.

This helped fixed the errors & 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.

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.

Here is my update to the example's script:

<script>
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 > 0 && !sourceBuffer.updating) {
        console.error("queue.shift");
      // if (queue.length) {
        sourceBuffer.appendBuffer(queue.shift());
      }
      if (finished && !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 > 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));
  };
}
</script>

---

Edit: In hopes of helping others that may come across this issue, let me add the solution/outcome.

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: http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5

I plan to continue playing around with these other file formats now.

Answer 1

Don't get the code from the HTML page, download the whole project from Github: https://github.com/dazedsheep/DASH-JS.

Make sure you place it where you can call it under localhost/dash.

You have to make sure you have the media files inside the directory "bunny_2s_700kbit" which you have to download from here: http://www-itec.uni-klu.ac.at/ftp/datasets/mmsys12/BigBuckBunny/bunny_2s_480p_only/bunny_2s_700kbit/

Then make sure you have the correct paths in bigbuckbunny_mp.mpd:

<BaseURL>http://localhost/dash/</BaseURL>

and

<Initialization sourceURL="bunny_2s_700kbit/bunny_480_700kbit_dash.mp4"/>

and the correct path in dashtest.html:

var dashPlayer = new DASHPlayer(video,"bigbuckbunny_mp.mpd");