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 una variedad de casos de uso, como la transmisión adaptativa y el cambio de hora de las transmisiones en vivo.

A continuación, se muestra una demostración rápida 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);

DEMO

En el ejemplo, se divide un video .webm en 5 fragmentos con las APIs de File. Luego, se “transmite” toda la película 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: Actualmente, 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.