এই নিবন্ধে, আপনি মিডিয়া স্ট্রিমিং এর আরও উন্নত ধারণা সম্পর্কে শিখতে যাচ্ছেন এবং শেষ পর্যন্ত আপনার বিভিন্ন স্ট্রিমিং ব্যবহারের ক্ষেত্রে, প্রোটোকল এবং এক্সটেনশন সম্পর্কে ভাল ধারণা থাকা উচিত। স্ট্রিমিং আসলে কি তার ব্যাখ্যা দিয়ে শুরু করা যাক।
মিডিয়া স্ট্রিমিং হল মিডিয়া বিষয়বস্তু টুকরো টুকরো বিতরণ এবং প্লে ব্যাক করার একটি উপায়। একটি একক ফাইল লোড করার পরিবর্তে, যা নেটওয়ার্কের জন্য অপ্টিমাইজ করা না হলে ধীর হতে পারে, প্লেয়ারটি একটি ম্যানিফেস্ট ফাইল পড়ে যা বর্ণনা করে যে কীভাবে টার্গেট মিডিয়াকে ডেটার পৃথক অংশে বিভক্ত করা হয়। মিডিয়া খণ্ডগুলিকে পরে গতিশীলভাবে রানটাইমে একসাথে সেলাই করা হয়—সম্ভবত বিভিন্ন বিটরেটে , যা আপনি পরে শিখবেন।
মনে রাখবেন যে আপনার ওয়েবসাইটে স্ট্রিমিং প্রদান করতে সার্ভারকে অবশ্যই রেঞ্জ HTTP অনুরোধ শিরোনাম সমর্থন করতে হবে। <ভিডিও> এবং <উৎস> ট্যাগ নিবন্ধে Accept-Ranges হেডার সম্পর্কে আরও জানুন।
স্ট্রিমিং ব্যবহারের ক্ষেত্রে
স্ট্রীম বর্ণনা করে মিডিয়া খণ্ড এবং প্রয়োজনীয় ম্যানিফেস্ট তৈরি করা ঠিক সোজা নয়, তবে স্ট্রিমিং কিছু আকর্ষণীয় ব্যবহারের ক্ষেত্রে আনলক করে যেগুলি স্ট্যাটিক সোর্স ফাইলগুলির একটি সেটে একটি <video> উপাদান নির্দেশ করে অর্জন করা সম্ভব নয়। আপনি পরবর্তী বিভাগে কীভাবে একটি ওয়েব পৃষ্ঠায় মিডিয়া যুক্ত করবেন সে সম্পর্কে আরও শিখবেন। প্রথমত, মাল্টিমিডিয়া স্ট্রিমিং করার জন্য কয়েকটি ব্যবহারের ক্ষেত্রে আপনার জানা উচিত যদি আপনি <video> উপাদানে একাধিক ফাইল লোড করার চেয়ে আরও এগিয়ে যেতে চান।
- অভিযোজিত স্ট্রিমিং হল যেখানে মিডিয়া খণ্ডগুলিকে বেশ কয়েকটি বিটরেটে এনকোড করা হয় এবং ক্লায়েন্টের বর্তমানে উপলব্ধ ব্যান্ডউইথের সাথে মানানসই সর্বোচ্চ মানের মিডিয়া অংশটি মিডিয়া প্লেয়ারে ফেরত দেওয়া হয়।
- লাইভ সম্প্রচার হল যেখানে মিডিয়া অংশগুলি এনকোড করা হয় এবং রিয়েল টাইমে উপলব্ধ করা হয়।
- মিডিয়া সোর্স পরিবর্তন না করেই বিজ্ঞাপনের মতো অন্যান্য মিডিয়াকে একটি স্ট্রীমে ইনজেকশন দেওয়া হয়।
স্ট্রিমিং প্রোটোকল
ওয়েবে সর্বাধিক ব্যবহৃত দুটি স্ট্রিমিং প্রোটোকল হল ডায়নামিক অ্যাডাপ্টিভ স্ট্রিমিং ওভার HTTP ( DASH ) এবং HTTP লাইভ স্ট্রিমিং ( HLS )। যে প্লেয়াররা এই প্রোটোকলগুলিকে সমর্থন করে তারা জেনারেট করা ম্যানিফেস্ট ফাইলটি আনবে, কোন মিডিয়া অংশগুলিকে অনুরোধ করতে হবে তা নির্ধারণ করবে এবং তারপরে সেগুলিকে চূড়ান্ত মিডিয়া অভিজ্ঞতায় একত্রিত করবে৷
একটি স্ট্রিম চালানোর জন্য <video> ব্যবহার করা হচ্ছে
অনেক ব্রাউজার স্থানীয়ভাবে আপনার স্ট্রিম চালাতে যাচ্ছে না। যদিও এইচএলএস প্লেব্যাকের জন্য কিছু নেটিভ সমর্থন রয়েছে, ব্রাউজারগুলি সাধারণত নেটিভ ড্যাশ স্ট্রিম প্লেব্যাক সমর্থন করে না । এর মানে হল প্রায়ই একটি ম্যানিফেস্ট ফাইলে <video> উপাদানের <source> নির্দেশ করা যথেষ্ট নয়।
<video controls>
<source src="manifest.mpd" type="application/dash+xml">
</video>
একটি ঘাটতি হিসাবে মনে হতে পারে আসলে ছদ্মবেশ একটি শক্তি. স্ট্রীমগুলি শক্তিশালী এবং যে অ্যাপ্লিকেশনগুলি স্ট্রীমগুলি ব্যবহার করে সেগুলির বিভিন্ন প্রয়োজন রয়েছে৷
ম্যানিফেস্ট ফাইলগুলি সাধারণত একক মিডিয়ার বিভিন্ন রূপ বর্ণনা করে। বিভিন্ন বিটরেট, বেশ কয়েকটি অডিও ট্র্যাক এবং এমনকি একই মিডিয়া বিভিন্ন ফর্ম্যাটে এনকোড করা নিয়ে চিন্তা করুন।
কিছু অ্যাপ্লিকেশন বাফারে একটি বৃহত্তর পরিমাণ ভিডিও রাখতে চাইতে পারে, অন্যরা আসন্ন পর্ব থেকে প্রথম কয়েক সেকেন্ডের ভিডিও প্রিফেচ করতে চাইতে পারে এবং কিছু অভিযোজিত স্ট্রিমিংয়ের জন্য তাদের নিজস্ব যুক্তি প্রয়োগ করতে চায়। প্লেব্যাকের জন্য মিডিয়া স্ট্রীম তৈরি করার জন্য আপনি কিছু ধরণের অন্তর্নির্মিত ব্রাউজার বৈশিষ্ট্য থাকতে চান এবং এটি ঠিক তাই ঘটে।
মিডিয়া সোর্স এক্সটেনশন
সৌভাগ্যক্রমে, W3C মিডিয়া সোর্স এক্সটেনশন (MSE) নামে কিছু সংজ্ঞায়িত করেছে যা জাভাস্ক্রিপ্টকে আমাদের মিডিয়া স্ট্রীম তৈরি করতে দেবে। সংক্ষেপে, MSE ডেভেলপারদেরকে একটি MediaSource অবজেক্টকে একটি <video> উপাদানের সাথে সংযুক্ত করার অনুমতি দেয় এবং MediaSource দৃষ্টান্তের সাথে সংযুক্ত বাফারগুলিতে যা কিছু মিডিয়া ডেটা পাম্প করা হয় তা প্লেব্যাক করতে দেয়।
মৌলিক উদাহরণ
const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
'sourceopen',
() => {
const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const buffer = mediaSource.addSourceBuffer(mimeString);
buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
}
);
উপরের সরলীকৃত উদাহরণটি কয়েকটি জিনিস চিত্রিত করে:
- যতদূর
<video>উদ্বিগ্ন, এটি একটি URL থেকে মিডিয়া ডেটা গ্রহণ করছে। - উত্পন্ন URL শুধুমাত্র একটি
MediaSourceউদাহরণের একটি পয়েন্টার. -
MediaSourceইনস্ট্যান্স এক বা একাধিকSourceBufferইনস্ট্যান্স তৈরি করে। - তারপরে আমরা বাফারে বাফারে বাইনারি মিডিয়া ডেটা যুক্ত করি, যেমন
fetchব্যবহার করে।
যদিও এই মৌলিক ধারণাগুলি সহজ, এবং এটি অবশ্যই স্ক্র্যাচ থেকে একটি DASH এবং HLS সামঞ্জস্যপূর্ণ ভিডিও প্লেয়ার লেখা সম্ভব, বেশিরভাগ লোকেরা সাধারণত শাকা প্লেয়ার , JW প্লেয়ার , বা ভিডিওর মতো পরিপক্ক ওপেন সোর্স সমাধানগুলির মধ্যে একটি বেছে নেয়। js কয়েক নাম.
যাইহোক, আমরা কিনো নামে একটি ডেমো মিডিয়া PWA তৈরি করেছি যা দেখায় যে আপনি কীভাবে আপনার নিজস্ব মৌলিক স্ট্রিমিং মিডিয়া ওয়েবসাইট তৈরি করতে যাবেন যেটি শুধুমাত্র সহজ <video> উপাদান ব্যবহার করে অফলাইন মিডিয়া প্লেব্যাক প্রদান করে। ফ্রেমওয়ার্ক এবং ডিজিটাল রাইট ম্যানেজমেন্টকে সমর্থন করার জন্য আমাদের রোডম্যাপে অন্যান্য বৈশিষ্ট্যগুলির মধ্যে পরিকল্পনা রয়েছে৷ তাই সময়ে সময়ে আপডেটের জন্য আবার চেক করুন, অথবা একটি বৈশিষ্ট্যের জন্য অনুরোধ করুন। অফলাইন স্ট্রিমিং নিবন্ধ সহ PWA এ এটি সম্পর্কে আরও পড়ুন।
মিডিয়া খণ্ড বিন্যাস
দীর্ঘ সময়ের জন্য, DASH এবং HLS-এর প্রয়োজন মিডিয়া অংশগুলিকে বিভিন্ন ফর্ম্যাটে এনকোড করা। 2016 সালে, তবে, স্ট্যান্ডার্ড ফ্র্যাগমেন্টেড MP4 (fMP4) ফাইলগুলির জন্য সমর্থন HLS-এ যোগ করা হয়েছিল, একটি ফর্ম্যাট যা DASHও সমর্থন করে।
fMP4 কন্টেইনার এবং H.264 কোডেক ব্যবহার করে ভিডিও খণ্ডগুলি উভয় প্রোটোকল দ্বারা সমর্থিত এবং বেশিরভাগ প্লেয়ার দ্বারা চালানো যায়৷ এটি কন্টেন্ট প্রযোজকদের শুধুমাত্র একবার তাদের ভিডিও এনকোড করার অনুমতি দেয়, যার ফলে সময় এবং ডিস্কের স্থান বাঁচে ।
ভাল মানের এবং নিম্ন ফাইলের আকার অর্জন করতে, আপনি VP9 মত আরও দক্ষ ফর্ম্যাট ব্যবহার করে মিডিয়া খন্ডের বেশ কয়েকটি সেট এনকোড করতে চাইতে পারেন, যদিও আমরা অনেক এগিয়ে যাওয়ার আগে আপনাকে প্রথমে ওয়েবের জন্য মিডিয়া ফাইলগুলি কীভাবে প্রস্তুত করতে হয় তা শিখতে হবে, এবং যে আপ পরবর্তী.