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 के डेवलपर चैनल के 17 और उसके बाद के वर्शन में उपलब्ध है. इसके लिए, --enable-media-source फ़्लैग को सेट करना ज़रूरी है या about:flags की मदद से चालू करना होगा.