Streaming video menggunakan MediaSource API

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

Berikut adalah 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 bagian ke elemen menggunakan MediaSource API.

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

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