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

Interfejs MediaSource API rozszerza element HTMLMediaElement, aby umożliwić generowanie strumieni multimediów do odtwarzania przez JavaScript. Zezwalanie JavaScript na generowanie strumieni ułatwia różne przypadki użycia, takie jak adaptacyjne przesyłanie strumieniowe i przesuwanie w czasie transmisji na żywo.

Oto krótkie demonstracja i przykład użycia 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);

DEMO

W tym przykładzie film w formacie .webm jest dzielony na 5 części za pomocą interfejsów File API. Następnie cały film jest „przesyłany strumieniowo” do tagu <video> poprzez dołączanie każdego fragmentu do elementu za pomocą interfejsu MediaSource API.

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

Pomoc: obecnie interfejs MediaSource API jest dostępny tylko w Chrome w wersji 17 lub nowszej w kanale deweloperskim, gdy flaga --enable-media-source jest ustawiona lub włączona za pomocą about:flags.