Lire des vidéos en streaming à l'aide de l'API MediaSource

L'API MediaSource étend HTMLMediaElement pour permettre à JavaScript de générer des flux multimédias à lire. Permettre à JavaScript de générer des flux facilite divers cas d'utilisation, comme le streaming adaptatif et les flux en direct avec décalage temporel.

Voici une démonstration rapide et un exemple d'utilisation de l'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);

DÉMO

L'exemple divise une vidéo .webm en 5 segments à l'aide des API File. Le film entier est ensuite "diffusé en streaming" dans une balise <video> en ajoutant chaque fragment à l'élément à l'aide de l'API MediaSource.

Pour en savoir plus sur l'API, consultez la spécification.

Assistance:actuellement, l'API MediaSource n'est disponible que dans la version en développement 17 ou ultérieure de Chrome, avec l'indicateur --enable-media-source défini ou activé via about:flags.