MediaSource API'sını kullanarak video akışı

MediaSource API, JavaScript'in oynatılmak üzere medya akışları oluşturmasına izin vermek için HTMLMediaElement öğesini genişletir. JavaScript'in yayın oluşturmasına izin vermek, uyarlanabilir akış ve zaman kaydırma özelliğine sahip canlı yayınlar gibi çeşitli kullanım alanlarını kolaylaştırır.

API'nin kısa bir demo'sunu ve örnek kullanımını aşağıda bulabilirsiniz:

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

Örnekte, dosya API'leri kullanılarak bir .webm videosu 5 parçaya bölünmektedir. Ardından, her bir parça MediaSource API kullanılarak öğeye eklenerek filmin tamamı bir <video> etiketine "aktarılır".

API hakkında daha fazla bilgi edinmek istiyorsanız spesifikasyonu inceleyin.

Destek: MediaSource API şu anda yalnızca Chrome Geliştirici Kanalı 17 ve sonraki sürümlerde --enable-media-source işareti ayarlanmış veya about:flags aracılığıyla etkinleştirilmiş olarak kullanılabilir.