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

MediaSource API'sı, JavaScript'in oynatma için medya akışları oluşturmasına izin vermek üzere HTMLMediaElement öğesini genişletir. JavaScript'in akış oluşturmasına izin vermek, çeşitli kullanım durumlarını (ör. uyarlanabilir akış ve zaman kaydırıcı canlı yayınlar) kolaylaştırır.

Aşağıda, API'nin kısa bir demosunu ve örnek kullanımını görebilirsiniz:

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);

TANITIM

Örnekte, Dosya API'leri kullanılarak bir .webm videosu 5 parçaya bölünmüştür. Daha sonra tüm film, MediaSource API'sı kullanılarak her parçayı öğeye ekleyerek bir <video> etiketine "akış olarak yayınlanır".

API hakkında daha fazla bilgi edinmek istiyorsanız spesifikasyona bakın.

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