WebVTT কী?

WebVTT (Web Video Text Tracks Format) হল একটি টেক্সট-ভিত্তিক সাবটাইটেল ফরম্যাট যা ভিডিওতে সময়সূচি টেক্সট ট্র্যাক যোগ করতে ব্যবহৃত হয়। এটি HTML5‑এর <track> উপাদানের মাধ্যমে সমর্থিত অফিসিয়াল ফরম্যাট, যা আপনাকে নিম্নলিখিতগুলো যোগ করার অনুমতি দেয়:

• সাবটাইটেল (অনুবাদিত বক্তৃতা)
• ক্যাপশন (বক্তৃতা এবং শব্দ প্রভাব)
• বর্ণনা (স্ক্রিন রিডারদের জন্য দৃশ্যমান তথ্য)
• অধ্যায় (ভিডিওতে নেভিগেটযোগ্য পয়েন্ট)
• মেটাডেটা

WebVTT এর মৌলিক গঠন

• একটি WebVTT ফাইলের গঠন হল:
  • ঐচ্ছিক হেডার (WEBVTT)।
  • ঐচ্ছিক মেটাডেটা (মন্তব্য বা স্টাইল/স্ক্রিপ্ট ব্লক)।
  • কিউস (সময় এবং পে-লোড সহ টেক্সট সেগমেন্ট)।

১. কিউ ফরম্যাট

একটি কিউ নিম্নলিখিত গঠন অনুসরণ করে:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [cue settings]
Text payload...

• টাইমিং: HH:MM:SS.mmm ফরম্যাটে শুরুর এবং শেষের সময়।
• সেটিংস (ঐচ্ছিক):
  • vertical (উল্লম্ব টেক্সটের জন্য lr/rl)
  • line (অবস্থান নির্ধারণ)
  • position (অনুভূমিক সমন্বয়)
  • size (প্রস্থ/শতাংশ)
  • align (শুরু/মধ্য/শেষ)

২. কিউ পে-লোড

• সাধারণ টেক্সট অথবা মার্কআপ অন্তর্ভুক্ত হতে পারে:
  • ট্যাগস: <b>, <i>, <u>, <ruby>, <lang> ইত্যাদি।
  • টাইমস্ট্যাম্প (<00:00:05.000>) ক্যারাওকে-স্টাইল টেক্সটের জন্য।

৩. স্টাইলিং ও CSS

• স্টাইলিং নিম্নলিখিত পদ্ধতিতে প্রয়োগ করা যায়:
  • ইনলাইন কিউস (ট্যাগ ব্যবহার করে)।
  • CSS পসুডো-এলিমেন্টস (::cue, ::cue-region) HTML‑এ।

৪. মেটাডেটা ট্র্যাকস

WebVTT ইন্টারেক্টিভ অ্যাপ্লিকেশনের জন্য মেটাডেটা (JSON ইত্যাদি) বহন করতে পারে।

৫. ফাইল এনকোডিং

• UTF-8 এনকোডেড হতে হবে।
• লাইন শেষ হয় \r\n, \n, অথবা \r দিয়ে।

৬. প্রক্রিয়াকরণ নিয়ম

• পার্সারগুলোকে ত্রুটিপূর্ণ ফাইলগুলোকে শালীনভাবে হ্যান্ডেল করতে হবে।
• BOM (বাইট অর্ডার মার্ক) ঐচ্ছিক।

৭. HTML5 ইন্টিগ্রেশন

<video>
  <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
</video>

• kind হতে পারে subtitles, captions, descriptions, chapters, অথবা metadata।

৮. ব্রাউজার সাপোর্ট

• আধুনিক ব্রাউজারগুলোতে (Chrome, Firefox, Safari, Edge) ব্যাপকভাবে সমর্থিত।

৯. ব্যবহারিক ক্ষেত্র

• সাবটাইটেল/ক্যাপশন অ্যাক্সেসিবিলিটির জন্য।
• ক্যারাওকে লিরিক্স সময়সূচি টেক্সট সহ।
• ভিডিওতে অধ্যায় নেভিগেশন।
• ইন্টারেক্টিভ ভিডিও অ্যাপের জন্য মেটাডেটা।

WebVTT ফাইলের উদাহরণ:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our tutorial on WebVTT.

00:00:04.000 --> 00:00:08.000
In this video, you'll learn how to add subtitles to your HTML5 videos.

সার্চ ইঞ্জিন আপনার ভিডিও “দেখতে” পারে না—কিন্তু তারা টেক্সট-ভিত্তিক কন্টেন্ট পড়তে পারে। WebVTT ফাইল ব্যবহার করে, আপনি ইনডেক্সযোগ্য টেক্সট যোগ করেন যা:

• সনাক্তযোগ্যতা বৃদ্ধি করে: গুগল ক্যাপশন এবং ট্রান্সক্রিপ্ট ইনডেক্স করতে পারে, ফলে আপনার ভিডিওগুলো আরও সার্চ ফলাফলে দেখা যায়।
• এনগেজমেন্ট বাড়ায়: সাবটাইটেলযুক্ত ভিডিও ব্যবহারকারীদের দীর্ঘ সময় ধরে জড়িয়ে রাখে—সেশন সময় বৃদ্ধি পায় এবং বাউন্স রেট কমে।
• অ্যাক্সেসিবিলিটি উন্নত করে: ক্যাপশন শোনা না পারা বা শোনার সমস্যাযুক্ত ব্যবহারকারীদের জন্য অপরিহার্য, এবং SEO র‍্যাঙ্কিং অ্যালগরিদমে এটি পছন্দনীয়।

যখন একটি WebVTT ফাইল একটি ওয়েবপেজের ভিডিওর সঙ্গে যুক্ত হয়, গুগল সেই সময়সূচি টেক্সট পার্স এবং বুঝতে পারে, ফলে নির্দিষ্ট প্রশ্নের জন্য কন্টেন্টটি আরও প্রাসঙ্গিক হয়।

HTML5 ভিডিওতে WebVTT যোগ করার পদ্ধতি

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

• src: আপনার .vtt ফাইলের পথ
• kind: টেক্সট ট্র্যাকের ধরন (subtitles, captions, chapters ইত্যাদি)।
• srclang: ভাষা কোড (যেমন, en, es)।
• label: প্লেয়ারে প্রদর্শিত ট্র্যাক লেবেল।

WebVTT বনাম SRT: পার্থক্য কী?

WebVTT ফাইল তৈরি ও সম্পাদনার টুলস

• টেক্সট এডিটরস: VS Code, Sublime Text
• সাবটাইটেল এডিটরস: সাবটাইটেল এডিট, Amara, Aegisub
• কনভার্টারস: টুল ব্যবহার করে SRT থেকে VTT এবং উল্টোভাবে রূপান্তর করুন

WebVTT ফাইল কীভাবে খুলবেন?

একটি WebVTT (.vtt) ফাইল খুলতে, আপনি যেকোনো টেক্সট এডিটর অথবা সাবটাইটেল এডিটর ব্যবহার করতে পারেন।

টেক্সট এডিটরে খুলুন

• Windows: Notepad, Notepad++, VS Code
• macOS: TextEdit, Sublime Text
• Linux: Gedit, nano, Vim

যেহেতু .vtt ফাইলগুলো সাধারণ টেক্সট, আপনি সেগুলো যেকোনো সাধারণ টেক্সট ফাইলের মতো দেখতে এবং সম্পাদনা করতে পারেন।

সাবটাইটেল এডিটরে খুলুন

• Subtitle Edit (Windows)
• Aegisub (ক্রস-প্ল্যাটফর্ম)
• Amara (ওয়েব-ভিত্তিক)

ব্রাউজারে খুলুন

১. একটি সহজ HTML ফাইল তৈরি করুন, যাতে <video> এবং <track> ট্যাগ থাকবে।
২. ব্রাউজারে HTML ফাইলটি খুলে ভিডিওটি সাবটাইটেলসহ দেখুন।

ASS ফাইলের মূল বৈশিষ্ট্য

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

প্রশ্ন ১: WebVTT এবং SRT এর মধ্যে পার্থক্য কী?

উত্তর: WebVTT হল SRT‑এর উপর ভিত্তি করে তৈরি, তবে এতে টেক্সট পজিশনিং, ভয়েস ট্যাগ, CSS স্টাইলিং এবং মেটাডেটা সমর্থনের মতো গুরুত্বপূর্ণ ফিচার যোগ করা হয়েছে, পাশাপাশি এটি HTML5 ভিডিওয়ের সঙ্গে নেটিভ ইন্টিগ্রেশন প্রদান করে।

প্রশ্ন ২: আমি কীভাবে YouTube‑এ WebVTT সাবটাইটেল যোগ করতে পারি?

উত্তর: আপনার ভিডিওতে সাবটাইটেল যোগ করার সময় .vtt ফাইল আপলোড করুন, অথবা YouTube‑এর অটো‑ক্যাপশন ব্যবহার করে জেনারেটেড WebVTT ফাইল ডাউনলোড করে সম্পাদনা করুন।

প্রশ্ন ৩: WebVTT ফাইলগুলোতে ছবি অন্তর্ভুক্ত করা সম্ভব কি?

উত্তর: WebVTT স্পেসিফিকেশন সরাসরি এমবেডেড ইমেজ সমর্থন করে না, তবে আপনি মেটাডেটা কিউতে URL যুক্ত করে কাস্টম জাভাস্ক্রিপ্টের মাধ্যমে ইমেজ রেন্ডারিং বাস্তবায়ন করতে পারেন।

প্রশ্ন ৪: কেন আমার WebVTT স্টাইল প্রয়োগ হচ্ছে না?

উত্তর: নিশ্চিত করুন যে STYLE ব্লকগুলো প্রথম কিউয়ের আগে উপস্থিত, কোনো ফাঁকা লাইন নেই, এবং ::cue পসুডো-এলিমেন্ট সঠিকভাবে ব্যবহার করা হয়েছে। এছাড়াও ব্রাউজার সামঞ্জস্যতা পরীক্ষা করুন।

প্রশ্ন ৫: WebVTT ফাইলগুলো HLS এর মতো স্ট্রিমিং প্রোটোকলগুলোর সঙ্গে কাজ করে কি?

উত্তর: হ্যাঁ, HLS (HTTP Live Streaming) ক্যাপশনসহ ভিডিও কন্টেন্টের কার্যকর স্ট্রিমিংয়ের জন্য সেগমেন্টেড WebVTT সমর্থন করে।

রেফারেন্স

• WebVTT: ওয়েব ভিডিও টেক্সট ট্র্যাকস ফরম্যাট