Stream video using the MediaSource API

Published on Updated on

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(;
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.

Updated on Improve article


Chrome Developer Tools for speed


WebGL demo roundup

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.