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