Reproduce videos con la API de MediaSource

La API de MediaSource extiende HTMLMediaElement para permitir que JavaScript genere transmisiones de contenido multimedia para la reproducción. Permitir que JavaScript genere transmisiones facilita diversos casos de uso, como las transmisiones adaptables y las transmisiones en vivo con cambio de tiempo.

A continuación, se incluye una breve demostración y un ejemplo de uso de la 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) {
            video.webkitSourceEndOfStream(HTMLMediaElement.EOS_NO_ERROR);
        }
        };
    })(i);

    reader.readAsArrayBuffer(chunk);
    }
}, false);

DEMOSTRACIÓN

En el ejemplo, se divide un video .webm en 5 partes con las API de archivo. Luego, la película completa se "transmite" a una etiqueta <video> agregando cada fragmento al elemento con la API de MediaSource.

Si te interesa obtener más información sobre la API, consulta la especificación.

Compatibilidad: Por el momento, la API de MediaSource solo está disponible en el canal para desarrolladores de Chrome 17 y versiones posteriores con la marca --enable-media-source establecida o habilitada a través de about:flags.