Video mit der MediaSource API streamen

Die MediaSource API erweitert die HTMLMediaElement, sodass JavaScript-Code Mediastreams für die Wiedergabe generieren kann. Wenn Streams mit JavaScript generiert werden können, sind eine Vielzahl von Anwendungsfällen möglich, z. B. adaptives Streaming und zeitversetzte Livestreams.

Hier ist eine kurze Demo und ein Beispiel für die Verwendung der 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

Im Beispiel wird ein .webm-Video mithilfe der File APIs in 5 Chunks aufgeteilt. Der gesamte Film wird dann an ein <video>-Tag gestreamt, indem jeder Chunk mithilfe der MediaSource API an das Element angehängt wird.

Weitere Informationen zur API finden Sie in der Spezifikation.

Unterstützung:Derzeit ist die MediaSource API nur in Chrome Dev Channel 17 und höher verfügbar, wenn das Flag --enable-media-source gesetzt oder über about:flags aktiviert ist.