Skip to content

ভিডিও প্লেয়ার: জিরো টু মাস্টারি — রোডম্যাপ

তেরোটা চ্যাপ্টার যা প্লেয়ারকে "একটা video ট্যাগ বসালেই চলে" থেকে নিয়ে যায় এমন জায়গায়, যেখানে কোন ভিডিও কেন আটকাল, কেন শুরু হতে দেরি হলো, কেন এক ডিভাইসে চলে আর আরেকটায় চলে না, সেটা আপনি নিজেই খুঁজে বের করতে পারবেন।

শেষে গিয়ে আপনি যা করতে পারবেন

ব্রাউজারের video এলিমেন্টের প্রতিটা ইভেন্ট আর স্টেট পড়তে পারবেন। Media Source Extensions দিয়ে নিজের হাতে সেগমেন্ট খাইয়ে একটা ছোট প্লেয়ার বানাতে পারবেন। hls.js, dash.js বা Shaka Player ভেতরে কী করে, ABR কীভাবে কোয়ালিটি বদলায়, DRM লাইসেন্স কীভাবে আসে, ক্যাপশন আর অ্যাড কীভাবে বসে, আর মোবাইল, TV ও ক্রোমকাস্টে প্লেয়ার কেন আলাদা আচরণ করে, সেটা জানবেন। আর “ভিডিও শুরু হচ্ছে না”, “বারবার বাফার করছে”, “Safari-তে চলে না”, “DRM এরর”, “ক্যাপশন দেখাচ্ছে না” এমন যেকোনো সমস্যায় কোথা থেকে শুরু করবেন, সেটা জানা থাকবে।

প্রিরেকুইজিট: ভিডিও ট্র্যাকের প্রথম তিনটা চ্যাপ্টার (ভিডিও কী, কোডেক, কন্টেইনার) আর ছয় ও সাত নম্বর চ্যাপ্টার (প্যাকেজিং, প্লেব্যাক ও ABR)। এই ট্র্যাক সেগুলো আবার শেখায় না, ওগুলোর উপর দাঁড়িয়ে প্লেয়ারের দিকটা গভীরে দেখায়। একটু JavaScript আর ব্রাউজারের DevTools চেনা থাকলেই চলবে।

১৩টি চ্যাপ্টার, ক্রম অনুযায়ী

ফান্ডামেন্টালস

  1. প্লেয়ার আসলে কী — ডিকোড পাইপলাইন, নেটিভ বনাম JavaScript প্লেয়ার
  2. video এলিমেন্টের ভেতরে — ইভেন্ট, readyState, অটোপ্লে পলিসি
  3. Media Source Extensions — SourceBuffer, কোডেক স্ট্রিং, buffered রেঞ্জ

প্লেয়ারের কাজ

  1. ম্যানিফেস্ট থেকে প্লেব্যাক — hls.js, dash.js, Shaka, আর Safari-র নেটিভ HLS
  2. বাফার ও ABR বাস্তবায়ন — বাফার টার্গেট, থ্রুপুট মাপা, BOLA
  3. স্টার্টআপ, সিক ও থাম্বনেইল — প্রথম ফ্রেম দ্রুত দেখানো, ট্রিক প্লে
  4. ক্যাপশন, অডিও ট্র্যাক ও অ্যাক্সেসিবিলিটি — WebVTT, IMSC, CEA-608/708

প্রোডাকশন প্লেয়ার

  1. DRM ও EME — Widevine, FairPlay, PlayReady, লাইসেন্স ফ্লো
  2. প্লেয়ারে অ্যাড — CSAI বনাম SSAI, VAST, VMAP
  3. মোবাইল, TV ও কাস্টিং — AVPlayer, Media3, স্মার্ট TV, Chromecast, AirPlay
  4. প্লেয়ার অ্যানালিটিক্স ও QoE — স্টার্টআপ টাইম, রিবাফার রেশিও, CMCD

মাস্টারি

  1. শূন্য থেকে একটা প্লেয়ার — MSE দিয়ে HLS fMP4 চালানো, ধাপে ধাপে
  2. ডিবাগিং প্লেবুক — লেয়ার ধরে ধরে পদ্ধতি, আর লক্ষণ থেকে কারণের পূর্ণ ক্যাটালগ

এই ট্র্যাক কীভাবে ব্যবহার করবেন

ক্রম অনুযায়ী পড়ুন। প্রথম তিনটা চ্যাপ্টার ব্রাউজার আসলে কী দেয় সেটা বোঝায়; বাকি সব প্লেয়ার লাইব্রেরি এর উপরেই বানানো। দ্বিতীয় চ্যাপ্টার থেকে একটা ব্রাউজার ট্যাব আর DevTools খোলা রেখে কোডগুলো নিজে চালান। তেরো নম্বর চ্যাপ্টারটা বারবার ফিরে আসার জন্য। VOD আর লাইভ স্ট্রিমিং ট্র্যাক দুটো সার্ভারের দিক দেখায়; প্লেয়ার সেই দুইয়েরই শেষ মাথা।

মোট পড়ার সময় মোটামুটি সাড়ে তিন ঘণ্টা। হাতে-কলমে করলে একটা পুরো দিন।