इस लेख में आपको WebVTT (वेब वीडियो टेक्स्ट ट्रैक) फ़ॉर्मैट के बारे में जानकारी मिलेगी, इसका इस्तेमाल, समय-समय पर दिखने वाले टेक्स्ट डेटा के बारे में बताने के लिए किया जाता है. जैसे, सबटाइटल या सबटाइटल ताकि दर्शक आपके वीडियो को आसानी से समझ सकें.
सुलभता कोई केक पर बर्फ़ लगाने जैसा नहीं है. यह कभी भी कुछ भी नहीं होता बैकलॉग है, जो बाद में इसे उपलब्ध कराने की उम्मीद में है. कैप्शन और स्क्रीन रीडर सिर्फ़ ब्यौरे की मदद से ही लोगों को आपके वीडियो देखने का अनुभव मिलता है. वे कानून या नियम के तहत ज़रूरी होते हैं.
<track> टैग जोड़ें
किसी वेब वीडियो में कैप्शन या स्क्रीन रीडर की जानकारी जोड़ने के लिए, <track> जोड़ें
<video> टैग के अंदर रखें. कैप्शन और स्क्रीन रीडर के अलावा
ब्यौरे, <track> टैग का इस्तेमाल सबटाइटल और चैप्टर के टाइटल के लिए भी किया जा सकता है.
<track> टैग की मदद से, सर्च इंजन यह समझ पाते हैं कि वीडियो में क्या है.
हालांकि, वे सुविधाएं इस लेख में शामिल नहीं हैं.
<track> टैग, <source> एलिमेंट की तरह है. दोनों में src मौजूद है
एट्रिब्यूट इस्तेमाल करें. <track> टैग के लिए, यह
WebVTT फ़ाइल. label एट्रिब्यूट से पता चलता है कि कोई ट्रैक कैसा होगा
की पहचान की गई है.
कई भाषाओं के ट्रैक उपलब्ध कराने के लिए, हर भाषा के लिए अलग <track> टैग जोड़ें
आपकी उपलब्ध कराई जा रही WebVTT फ़ाइल और srclang का इस्तेमाल करके भाषा की जानकारी दें
एट्रिब्यूट की वैल्यू सबमिट करें.
दो <track> टैग वाले <video> टैग का एक उदाहरण नीचे दिखाया गया है. साथ ही,
सैंपल, जिसे glitch पर देखा जा सकता है (सोर्स).
<video> एलिमेंट के चाइल्ड के तौर पर <track> एलिमेंट जोड़ें:
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
WebVTT फ़ाइल स्ट्रक्चर
नीचे ऊपर लिंक किए गए डेमो के लिए एक काल्पनिक WebVTT फ़ाइल दी गई है. फ़ाइल क्यू की सीरीज़ वाली टेक्स्ट फ़ाइल. हर क्यू, टेक्स्ट का एक ब्लॉक है, जिसे दिखाया जाता है और इसके दिखने की समयावधि तय कर दें.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
ट्रैक फ़ाइल के हर आइटम को एक क्यू कहा जाता है. हर क्यू का शुरू होने का समय होता है और
खत्म होने का समय नीचे की लाइन में क्यू टेक्स्ट के साथ, तीर के निशान से अलग किया गया है. क्यू यह कर सकते हैं
यहां दिए गए उदाहरण में, railroad और manuscript जैसे आईडी भी शामिल किए जा सकते हैं.
क्यू को एक खाली लाइन से अलग किया जाता है.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
क्यू समय hours:minutes:seconds.milliseconds फ़ॉर्मैट में होते हैं. पार्स करना सख्त है.
इसका मतलब है कि अगर ज़रूरी हो, तो नंबर शून्य पैड किए गए होने चाहिए: घंटे, मिनट और सेकंड
दो अंक (शून्य मान के लिए 00) और मिलीसेकंड में तीन होने चाहिए
अंक (शून्य वैल्यू के लिए 000). इस साइट पर एक बेहतरीन WebVTT पुष्टि करने वाला प्रोग्राम है
लाइव वेबवीटीटी वैलिडेटर, जो समय के फ़ॉर्मैट में गड़बड़ियों की जांच करता है और
समस्याएं, जैसे कि समय की जानकारी.
आप मैन्युअल तरीके से VTT फ़ाइल बना सकते हैं. हमें लगता है कि कई सेवाएं अपने लिए उन्हें बनाया जा सकता है.
जैसा कि हमारे पिछले उदाहरणों में देखा जा सकता है, WebVTT फ़ॉर्मैट काफ़ी आसान है. समय के साथ बस अपना टेक्स्ट डेटा जोड़ें.
हालांकि, अगर आपको कैप्शन को अलग-अलग पोज़िशन में रेंडर करना है, तो
बाईं या दाईं ओर अलाइनमेंट? कैप्शन को मौजूदा स्पीकर के साथ अलाइन करने के लिए ऐसा किया जा सकता है
कैमरे के सामने आने पर टेक्स्ट के बीच में कोई जगह न रखें. WebVTT ऐसा करने के लिए सेटिंग तय करता है.
और बहुत कुछ, सीधे
.vtt फ़ाइल. नोट करके देखें कि कैप्शन प्लेसमेंट को कैसे तय किया जाता है
समयसीमा की परिभाषाओं के बाद सेटिंग तय करें.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
एक और आसान सुविधा है सीएसएस का इस्तेमाल करके क्यू को स्टाइल करना. शायद आप चाहते हों
का फ़ोरग्राउंड रंग के साथ, बैकग्राउंड के रूप में स्लेटी लीनियर ग्रेडिएंट का इस्तेमाल करने के लिए
peachpuff में सभी कैप्शन और बोल्ड टेक्स्ट के लिए papayawhip.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
अगर आपको किसी एक व्यक्ति की स्टाइल और टैगिंग के बारे में ज़्यादा जानना है संकेतों के लिए, बेहतर उदाहरणों के लिए WebVTT स्पेसिफ़िकेशन बेहतर है.
टेक्स्ट ट्रैक के टाइप
क्या आपने <track> एलिमेंट का kind एट्रिब्यूट देखा? इसका इस्तेमाल इन कामों के लिए किया जाता है
यह बताता है कि किसी टेक्स्ट ट्रैक का वीडियो से क्या संबंध है. कॉन्टेंट बनाने
kind एट्रिब्यूट की वैल्यू ये हो सकती हैं:
captions: ट्रांसक्रिप्ट और संभावित अनुवादों से, सबटाइटल के लिए किसी भी ऑडियो का इस्तेमाल कर सकते हैं. सुनने में परेशानी वाले लोगों के लिए सही है. इसके अलावा, ऐसे मामलों में भी सही है, जब वीडियो म्यूट करके चलाया जा रहा है.subtitles: सबटाइटल में, बोली और टेक्स्ट का अनुवाद भाषा, वीडियो की मुख्य भाषा से अलग हो.descriptions: वीडियो के विज़ुअल वाले हिस्सों की जानकारी देने के लिए. दृष्टि बाधित लोगों के लिए सही है.chapters: इसे तब दिखाया जाता है, जब उपयोगकर्ता वीडियो.metadata: नहीं दिख रहा और स्क्रिप्ट में इसका इस्तेमाल किया जा सकता है.
अब जब आपने वीडियो को उपलब्ध कराने और उसे ऐक्सेस करने की बुनियादी बातें समझ ली हैं तो हो सकता है कि आपको अपने वेब पेज पर इस्तेमाल के ज़्यादा जटिल उदाहरणों के बारे में जानना हो. इसके बाद, आपको मीडिया फ़्रेमवर्क के बारे में जानें और जानें कि वे अपने वेब पेज पर वीडियो अपलोड करने के साथ-साथ, बेहतर सुविधाएं भी उपलब्ध कराते हैं.