এইচটিএমএল অডিও এবং ভিডিও উপাদানগুলি আপনাকে একটি src URL প্রদান করে মিডিয়া লোড, ডিকোড এবং প্লে করতে সক্ষম করে:
<video src='foo.webm'></video>
এটি সাধারণ ব্যবহারের ক্ষেত্রে ভাল কাজ করে, তবে অভিযোজিত স্ট্রিমিংয়ের মতো কৌশলগুলির জন্য, মিডিয়া সোর্স এক্সটেনশন API (MSE) আরও নিয়ন্ত্রণ প্রদান করে। MSE অডিও বা ভিডিওর অংশ থেকে জাভাস্ক্রিপ্টে স্ট্রিম তৈরি করতে সক্ষম করে।
আপনি simpl.info/mse এ MSE পরীক্ষা করে দেখতে পারেন:
নীচের কোডটি সেই উদাহরণ থেকে।
একটি MediaSource একটি অডিও বা ভিডিও উপাদানের জন্য মিডিয়ার একটি উৎস প্রতিনিধিত্ব করে। একবার একটি MediaSource অবজেক্ট ইনস্ট্যান্টিশিয়েট হয়ে গেলে এবং এর open ইভেন্টটি চালু হয়ে গেলে, SourceBuffer এতে যোগ করা যেতে পারে। এগুলি মিডিয়া বিভাগের জন্য বাফার হিসাবে কাজ করে:
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
var sourceBuffer =
mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
// Get video segments and append them to sourceBuffer.
}
appendBuffer() সহ একটি SourceBuffer এ প্রতিটি সেগমেন্ট যোগ করে মিডিয়া সেগমেন্টগুলিকে একটি অডিও বা ভিডিও উপাদানে 'স্ট্রিম' করা হয়। এই উদাহরণে, সার্ভার থেকে ভিডিও আনা হয় তারপর ফাইল API ব্যবহার করে সংরক্ষণ করা হয়:
reader.onload = function (e) {
sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
if (i === NUM_CHUNKS - 1) {
mediaSource.endOfStream();
} else {
if (video.paused) {
// start playing after first chunk is appended
video.play();
}
readChunk(++i);
}
};
প্লেব্যাক অর্ডার সেট করা হচ্ছে
Chrome 50 SourceBuffer mode অ্যাট্রিবিউটে অতিরিক্ত সমর্থন যোগ করে, যা আপনাকে নির্দিষ্ট করতে দেয় যে মিডিয়া সেগমেন্টগুলি যে ক্রমানুসারে যুক্ত করা হয়েছিল সেই ক্রমানুসারে, মিডিয়া সেগমেন্টগুলিতে প্রাথমিকভাবে বিচ্ছিন্ন টাইমস্ট্যাম্প ছিল কিনা তা কোন ব্যাপার না।
মিডিয়া সেগমেন্টের জন্য প্লেব্যাক অর্ডার নির্দিষ্ট করতে mode অ্যাট্রিবিউট ব্যবহার করুন। এটির দুটি মানগুলির মধ্যে একটি রয়েছে:
- সেগমেন্ট : প্রতিটি সেগমেন্টের টাইমস্ট্যাম্প (যা
timestampOffsetদ্বারা পরিবর্তিত হতে পারে) প্লেব্যাক অর্ডার নির্ধারণ করে, সেগমেন্টগুলি যে ক্রমে যুক্ত করা হোক না কেন। - ক্রম : মিডিয়া টাইমলাইনে বাফার করা সেগমেন্টের ক্রম নির্ধারিত হয়
SourceBufferসাথে কোন অংশে যুক্ত করা হয় তার দ্বারা।
SourceBuffer সাথে যুক্ত করার সময় মিডিয়া সেগমেন্টে বাইট স্ট্রিম ডেটা থেকে টাইমস্ট্যাম্প পার্স করা থাকলে, SourceBuffer এর mode প্রপার্টি সেগমেন্টে সেট করা হবে। অন্যথায় mode সিকোয়েন্সে সেট করা হবে। মনে রাখবেন যে টাইমস্ট্যাম্পগুলি ঐচ্ছিক নয়: বেশিরভাগ স্ট্রিম ধরনের জন্য সেগুলি অবশ্যই থাকতে হবে, এবং অন্যদের জন্য সেখানে থাকতে পারে না : ইনব্যান্ড টাইমস্ট্যাম্পগুলি স্ট্রিমের ধরনগুলির জন্য সহজাত যা সেগুলি ধারণ করে৷
mode অ্যাট্রিবিউট সেট করা ঐচ্ছিক। যে স্ট্রিমগুলিতে টাইমস্ট্যাম্প নেই (অডিও/এমপিইজি এবং অডিও/এএসি) mode শুধুমাত্র সেগমেন্ট থেকে সিকোয়েন্সে পরিবর্তন করা যেতে পারে: আপনি যদি সিকোয়েন্স থেকে সেগমেন্টে mode পরিবর্তন করার চেষ্টা করেন তাহলে একটি ত্রুটি দেখা যাবে। টাইমস্ট্যাম্প আছে এমন স্ট্রিমগুলির জন্য, বিভাগ এবং ক্রমগুলির মধ্যে পরিবর্তন করা সম্ভব, যদিও বাস্তবে এটি সম্ভবত এমন আচরণ তৈরি করবে যা অবাঞ্ছিত, বোঝা কঠিন বা ভবিষ্যদ্বাণী করা কঠিন।
সমস্ত স্ট্রীমের প্রকারের জন্য, আপনি মানকে বিভাগ থেকে ক্রম পরিবর্তন করতে পারেন। এর অর্থ হল সেগমেন্টগুলি যে ক্রমানুসারে যুক্ত করা হয়েছিল সেই ক্রমে বাজানো হবে এবং সেই অনুযায়ী নতুন টাইমস্ট্যাম্প তৈরি করা হবে:
sourceBuffer.mode = 'sequence';
ক্রমানুসারে mode মান সেট করতে সক্ষম হওয়া অবিচ্ছিন্ন মিডিয়া প্লেব্যাক নিশ্চিত করে, মিডিয়া সেগমেন্টের টাইমস্ট্যাম্পগুলি অবিচ্ছিন্ন থাকুক না কেন — উদাহরণস্বরূপ, ভিডিও মিক্সিংয়ে সমস্যা থাকলে, বা (যেকোন কারণেই) বিচ্ছিন্ন সেগমেন্টগুলি যুক্ত করা হয়। সঠিক স্ট্রীম মেটাডেটা উপলব্ধ থাকলে ক্রমাগত প্লেব্যাক নিশ্চিত করতে timestampOffset দিয়ে একটি অ্যাপের পলিফিল করা সম্ভব, তবে সিকোয়েন্স মোড প্রক্রিয়াটিকে সহজ এবং কম ত্রুটির প্রবণ করে তোলে।
MSE অ্যাপস এবং ডেমো
এগুলি MSE কার্যে দেখায়, যদিও SourceBuffer.mode ম্যানিপুলেশন ছাড়াই:
- মিডিয়া সোর্স API
- শাকা প্লেয়ার : ভিডিও প্লেয়ার ডেমো যা শাকা জাভাস্ক্রিপ্ট লাইব্রেরির সাথে DASH বাস্তবায়ন করতে MSE ব্যবহার করে
ব্রাউজার সমর্থন
- ডিফল্টরূপে Chrome 50 এবং তার বেশি
- ফায়ারফক্সের জন্য, বিস্তারিত জানার জন্য MDN দেখুন