"Stream" video using the MediaSource API
Google Developers Logo

Progressive Web App Road Show 2016

Stopping in New York, Chicago, Austin, Toronto, Mountain View and Seattle. Learn more and sign up now.

The MediaSource API extends the HTMLMediaElement to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.

Here is a quick demo and example usage of API:

const NUM_CHUNKS = 5;

var video = document.querySelector('video');
video.src = video.webkitMediaSourceURL;

video.addEventListener('webkitsourceopen', function(e) {
  var chunkSize = Math.ceil(file.size / NUM_CHUNKS);

  // Slice the video into NUM_CHUNKS and append each to the media element.
  for (var i = 0; i < NUM_CHUNKS; ++i) {
    var startByte = chunkSize * i;

    // file is a video file.
    var chunk = file.slice(startByte, startByte + chunkSize);

    var reader = new FileReader();
    reader.onload = (function(idx) {
      return function(e) {
        video.webkitSourceAppend(new Uint8Array(e.target.result));
        logger.log('appending chunk:' + idx);
        if (idx == NUM_CHUNKS - 1) {

}, false);


The example splits a .webm video into 5 chunks using the File APIs. The entire movie is then ‘streamed’ to a <video> tag by appending each chunk to the element using the MediaSource API.

If you’re interested in learning more about the API, see the specification.

Support: Currently, the MediaSource API is only available in Chrome Dev Channel 17+ with the --enable-media-source flag set or enabled via about:flags.

Profile photo of Eric Bidelman

Engineer @ Google working on Polymer, Chrome, and the web

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Terms of Service.