WebVTT क्या है?

WebVTT (Web Video Text Tracks Format) एक टेक्स्ट-आधारित सबटाइटल फ़ॉर्मेट है जो वीडियो में समय-संयोजित टेक्स्ट ट्रैक जोड़ने के लिए उपयोग किया जाता है। यह HTML5 द्वारा <track> तत्व के माध्यम से समर्थित आधिकारिक फ़ॉर्मेट है, जिससे आप जोड़ सकते हैं:

• सबटाइटल (अनूदित बोली)
• कैप्शन (बोली और ध्वनि प्रभाव)
• विवरण (स्क्रीन रीडर के लिए दृश्य जानकारी)
• अध्याय (वीडियो में नेविगेट करने योग्य बिंदु)
• मेटाडेटा

WebVTT की मूल संरचना

• WebVTT फ़ाइल में शामिल होते हैं:
  • एक वैकल्पिक हेडर (WEBVTT)।
  • वैकल्पिक मेटाडेटा (टिप्पणियाँ या शैली/स्क्रिप्ट ब्लॉक)।
  • क्यूज़ (समय और पेलोड के साथ टेक्स्ट सेगमेंट)।

1. क्यू फ़ॉर्मेट

एक क्यू की संरचना इस प्रकार है:

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

• समय: HH:MM:SS.mmm फ़ॉर्मेट में प्रारंभ और समाप्ति समय।
• सेटिंग्स (वैकल्पिक):
  • vertical (ऊर्ध्वाधर टेक्स्ट के लिए lr/rl)
  • line (स्थिति)
  • position (क्षैतिज संरेखण)
  • size (चौड़ाई/प्रतिशत)
  • align (start/middle/end)

2. क्यू पेलोड

सादा टेक्स्ट या मार्कअप शामिल हो सकता है:

• टैग्स: <b>, <i>, <u>, <ruby>, <lang>, आदि।
• टाइमस्टैम्प (<00:00:05.000>) कराओके-शैली टेक्स्ट के लिए।

3. स्टाइलिंग और CSS

स्टाइलिंग लागू की जा सकती है:

• इनलाइन क्यूज़ (टैग्स का उपयोग करके)।
• HTML में CSS स्यूडो-एलिमेंट्स (::cue, ::cue-region)।

4. मेटाडेटा ट्रैक्स

WebVTT मेटाडेटा (JSON आदि) इंटरैक्टिव एप्लिकेशन्स के लिए ले जा सकता है।

5. फ़ाइल एन्कोडिंग

• UTF-8 एन्कोडेड होना चाहिए।
• लाइनें \r\n, \n, या \r पर समाप्त होती हैं।

6. प्रोसेसिंग नियम

• पार्सर को खराब फ़ाइलों को सहजता से संभालना चाहिए।
• BOM (बाइट ऑर्डर मार्क) वैकल्पिक है।

7. HTML5 इंटीग्रेशन

<track> तत्व के साथ उपयोग किया जाता है:

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

• kind subtitles, captions, descriptions, chapters, या metadata हो सकता है।

8. ब्राउज़र समर्थन

आधुनिक ब्राउज़रों (Chrome, Firefox, Safari, Edge) में व्यापक रूप से समर्थित।

9. उपयोग केस

• सबटाइटल/कैप्शन पहुंच के लिए।
• कराओके लिरिक्स समय-संयोजित टेक्स्ट के साथ।
• वीडियो में अध्याय नेविगेशन।
• इंटरैक्टिव वीडियो ऐप्स के लिए मेटाडेटा।

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 फ़ाइलों का उपयोग करके, आप इंडेक्सेबल टेक्स्ट जोड़ते हैं जो:

• खोज योग्यता में सुधार: Google कैप्शन और ट्रांसक्रिप्ट को इंडेक्स कर सकता है, जिससे आपके वीडियो अधिक सर्च परिणामों में दिखते हैं।
• संलग्नता बढ़ाता है: सबटाइटल वाले वीडियो उपयोगकर्ताओं को अधिक समय तक जोड़ते हैं—सेशन अवधि बढ़ती है और बाउंस रेट घटता है।
• पहुँच में सुधार: कैप्शनिंग बधिर या सुनने में कठिनाई वाले उपयोगकर्ताओं के लिए आवश्यक है, और SEO रैंकिंग एल्गोरिदम में इसे प्राथमिकता दी जाती है।

जब किसी वेबपेज पर वीडियो के साथ WebVTT फ़ाइल जुड़ी होती है, Google उस समय-संयोजित टेक्स्ट को पार्स और समझ सकता है, जिससे सामग्री कुछ क्वेरीज़ के लिए अधिक प्रासंगिक बनती है।

HTML5 वीडियो में WebVTT कैसे जोड़ें

आप <track> तत्व का उपयोग करके अपने वीडियो में 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 फ़ाइलें बनाने और संपादित करने के उपकरण

आप .vtt फ़ाइलें बना या संपादित कर सकते हैं:

• टेक्स्ट एडिटर: VS Code, Sublime Text
• सबटाइटल एडिटर: Subtitle Edit, 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 (वेब-आधारित)

ब्राउज़र में खोलें

1. एक सरल HTML फ़ाइल बनाएं जिसमें <video> और <track> टैग हो।
2. ब्राउज़र में HTML फ़ाइल खोलें ताकि वीडियो के साथ सबटाइटल देख सकें।

ASS फ़ाइलों की मुख्य विशेषताएँ

अक्सर पूछे जाने वाले प्रश्न

Q1: WebVTT और SRT में क्या अंतर है?

A: WebVTT SRT पर आधारित है लेकिन टेक्स्ट पोजिशनिंग, वॉइस टैग्स, CSS स्टाइलिंग, और मेटाडेटा समर्थन जैसी महत्वपूर्ण सुविधाएँ जोड़ता है, साथ ही HTML5 वीडियो के साथ नेटिव इंटीग्रेशन प्रदान करता है।

Q2: मैं YouTube पर WebVTT सबटाइटल कैसे जोड़ूँ?

A: अपने वीडियो में सबटाइटल जोड़ते समय अपनी .vtt फ़ाइल अपलोड करें, या YouTube की ऑटोमैटिक कैप्शनिंग का उपयोग करके उत्पन्न WebVTT फ़ाइल को डाउनलोड करके संपादित करें।

Q3: क्या WebVTT फ़ाइलें छवियों को शामिल कर सकती हैं?

A: WebVTT स्पेसिफिकेशन सीधे एम्बेडेड इमेजेज को सपोर्ट नहीं करता, लेकिन आप URLs के साथ मेटाडेटा क्यूज़ का उपयोग कर सकते हैं और जावास्क्रिप्ट के माध्यम से कस्टम इमेज रेंडरिंग लागू कर सकते हैं।

Q4: मेरे WebVTT स्टाइल क्यों लागू नहीं हो रहे हैं?

A: सुनिश्चित करें कि STYLE ब्लॉक्स पहले क्यू से पहले दिखाई दें, उनमें कोई खाली लाइन न हो, और ::cue स्यूडो-एलिमेंट सही ढंग से उपयोग किया गया हो। साथ ही ब्राउज़र संगतता की जाँच करें।

Q5: क्या WebVTT फ़ाइलें HLS जैसे स्ट्रीमिंग प्रोटोकॉल के साथ काम करती हैं?

A: हाँ, HLS (HTTP Live Streaming) कैप्शन को वीडियो कंटेंट के साथ कुशलता से स्ट्रीम करने के लिए सेगमेंटेड WebVTT का समर्थन करता है।

संदर्भ

• WebVTT: वेब वीडियो टेक्स्ट ट्रैक फ़ॉर्मेट