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