What is this?

This demo splits a .webm video into chunks using the File APIs. The entire movie is then 'streamed' to a <video> element by appending each chunk using the MediaSource API.

Support: Chrome Dev Channel 17+ and the --enable-media-source flag set. The feature is enabled by default in Chrome 23, which also updated its implementation to the new version of the API.

Appending .webm video chunks using the Media Source API







var ms = new MediaSource();

var video = document.querySelector('video');
video.src = window.URL.createObjectURL(ms);

ms.addEventListener('sourceopen', function(e) {
  ...
  var sourceBuffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
  sourceBuffer.appendBuffer(oneVideoWebMChunk);
  ....
}, false);