Streaming video menggunakan MediaSource API

MediaSource API memperluas HTMLMediaElement untuk memungkinkan JavaScript menghasilkan streaming media untuk pemutaran. Mengizinkan JavaScript menghasilkan streaming memfasilitasi berbagai kasus penggunaan seperti streaming adaptif dan live stream pergeseran waktu.

Berikut ini demo singkat dan contoh penggunaan 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

Contoh ini membagi video .webm menjadi 5 bagian menggunakan File API. Seluruh film kemudian 'di-streaming' ke tag <video> dengan menambahkan setiap potongan ke elemen menggunakan MediaSource API.

Jika Anda tertarik untuk mempelajari API lebih lanjut, lihat spesifikasinya.

Dukungan: Saat ini, MediaSource API hanya tersedia di Chrome Dev Channel 17+ dengan tanda --enable-media-source yang disetel atau diaktifkan melalui about:flags.