MediaSource API HTMLMediaElement को बढ़ाता है, ताकि JavaScript को वीडियो चलाने के लिए मीडिया स्ट्रीम जनरेट करने की अनुमति मिल सके. JavaScript से स्ट्रीम जनरेट करने की अनुमति देने से, कई तरह के इस्तेमाल किए जा सकते हैं. जैसे, अडैप्टिव स्ट्रीमिंग और लाइव स्ट्रीम का समय बदलना.
यहां एक डेमो और एपीआई के इस्तेमाल का उदाहरण दिया गया है:
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);
इस उदाहरण में, File API का इस्तेमाल करके, .webm वीडियो को पांच हिस्सों में बांटा गया है. इसके बाद, MediaSource API का इस्तेमाल करके हर हिस्से को एलिमेंट में जोड़कर पूरी मूवी को <video> टैग पर 'स्ट्रीम' किया जाता है.
अगर आपको इस एपीआई के बारे में ज़्यादा जानना है, तो खास जानकारी देखें.
सहायता: फ़िलहाल, MediaSource API सिर्फ़ Chrome Dev Channel 17+ पर उपलब्ध है. इस पर --enable-media-source फ़्लैग सेट है या यह एपीआई about:flags से चालू है.