Video mit der MediaSource API streamen

Die MediaSource API erweitert HTMLMediaElement so, dass JavaScript Medienstreams für die Wiedergabe generieren kann. Wenn JavaScript erlaubt wird, Streams zu generieren, werden eine Vielzahl von Anwendungsfällen wie adaptives Streaming und zeitversetzte Livestreams ermöglicht.

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

In diesem Beispiel wird ein .webm-Video mithilfe der File APIs in fünf Teile unterteilt. Der gesamte Film wird dann an ein <video>-Tag „gestreamt“, indem jeder Block mithilfe der MediaSource API an das Element angehängt wird.

Weitere Informationen zur API finden Sie in der Spezifikation.

Support: Derzeit ist die MediaSource API nur in der Chrome-Entwicklerversion 17+ verfügbar, wobei das Flag --enable-media-source gesetzt oder über about:flags aktiviert ist.