Strumieniowe odtwarzanie filmów przy użyciu interfejsu MediaSource API

Interfejs MediaSource API rozszerza zakres HTMLMediaElement, umożliwiając JavaScript generowanie strumieni multimediów do odtwarzania. Zezwolenie na generowanie transmisji za pomocą kodu JavaScript ułatwia korzystanie z nich na przykład w transmisjach adaptacyjnych i transmisjach przesuwających w czasie.

Oto krótka prezentacja i przykładowe zastosowanie interfejsu 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);

Prezentacja

W tym przykładzie film .webm dzieli się na 5 fragmentów przy użyciu interfejsów API File. Cały film jest następnie przesyłany strumieniowo do tagu <video> przez dołączanie każdego fragmentu do elementu za pomocą interfejsu MediaSource API.

Jeśli chcesz dowiedzieć się więcej o interfejsie API, zapoznaj się ze specyfikacją.

Obsługa: obecnie interfejs MediaSource API jest dostępny tylko w wersji deweloperskiej Chrome 17 lub nowszej z ustawioną lub włączoną flagą --enable-media-source w about:flags.