মিডিয়াসোর্স API জাভাস্ক্রিপ্টকে প্লেব্যাকের জন্য মিডিয়া স্ট্রিম তৈরি করার অনুমতি দেওয়ার জন্য HTMLMediaElement প্রসারিত করে। জাভাস্ক্রিপ্টকে স্ট্রীম তৈরি করার অনুমতি দিলে বিভিন্ন ধরনের ব্যবহারের ক্ষেত্রে সুবিধা হয় যেমন অ্যাডাপ্টিভ স্ট্রিমিং এবং লাইভ স্ট্রিমের সময় পরিবর্তন।
এখানে 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);
উদাহরণটি ফাইল API ব্যবহার করে একটি .webm ভিডিওকে 5টি খণ্ডে বিভক্ত করে। মিডিয়াসোর্স API ব্যবহার করে উপাদানটিতে প্রতিটি খণ্ড যুক্ত করে সম্পূর্ণ মুভিটিকে একটি <video> ট্যাগে 'স্ট্রিম' করা হয়।
আপনি যদি API সম্পর্কে আরও জানতে আগ্রহী হন, স্পেসিফিকেশন দেখুন।
সমর্থন: বর্তমানে, MediaSource API শুধুমাত্র Chrome Dev Channel 17+-এ --enable-media-source পতাকা সেট সহ বা about:flags মাধ্যমে সক্ষম করা আছে।