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 le décalage temporel des diffusions en direct.

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);

DEMO

L'exemple divise une vidéo .webm en cinq fragments à l'aide des API File. Le film entier est ensuite "streamé" vers une balise <video> en ajoutant chaque segment à l'élément à l'aide de l'API MediaSource.

Pour en savoir plus sur l'API, consultez les spécifications.

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