पब्लिश करने की तारीख: 20 अगस्त, 2020
कई उपयोगकर्ता सिर्फ़ सबटाइटल और स्क्रीन रीडर के ब्यौरे की मदद से आपके वीडियो देख सकते हैं. कुछ अधिकार क्षेत्रों में, इनकी ज़रूरत भी कानून या नियम के तहत होती है. WebVTT (वेब वीडियो टेक्स्ट ट्रैक) फ़ॉर्मैट का इस्तेमाल, तय समय पर दिखने वाले टेक्स्ट का डेटा, जैसे कि सबटाइटल या सबटाइटल, ताकि आप अपने वीडियो को बेहतर बना सकें सुलभ है.
<track> टैग जोड़ें
किसी वेब वीडियो में कैप्शन या स्क्रीन रीडर के लिए जानकारी जोड़ने के लिए, <video> टैग में <track> टैग जोड़ें. कैप्शन और स्क्रीन रीडर के ब्यौरे के अलावा, <track> टैग का इस्तेमाल सबटाइटल और चैप्टर के टाइटल के लिए भी किया जा सकता है.
<track> टैग, <source> एलिमेंट की तरह है. दोनों में src मौजूद है
एट्रिब्यूट इस्तेमाल करें. <track> टैग के लिए, यह
WebVTT फ़ाइल.
label एट्रिब्यूट से पता चलता है कि किसी खास ट्रैक का इस्तेमाल कैसे किया जा सकता है
की पहचान की गई है.
एक से ज़्यादा भाषाओं के लिए ट्रैक उपलब्ध कराने के लिए, सबमिट की जा रही हर WebVTT फ़ाइल के लिए एक अलग <track> टैग जोड़ें. साथ ही, srclang एट्रिब्यूट का इस्तेमाल करके भाषा की जानकारी दें.
दो <track> टैग वाले <video> टैग के इस उदाहरण को देखें.
<track> एलिमेंट को <video> एलिमेंट के चाइल्ड एलिमेंट के तौर पर जोड़ें.
<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>
यहां एक सैंपल भी है. इसे glitch पर देखें.
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 वैलिडेटर पर, WebVTT की पुष्टि करने वाला एक बेहतरीन टूल मौजूद है. यह समय के फ़ॉर्मैट में होने वाली गड़बड़ियों की जांच करता है. साथ ही, समय के क्रम में न होने जैसी समस्याओं का पता लगाता है.
आपके पास मैन्युअल तरीके से वीटीटी फ़ाइल बनाने का विकल्प है. हालांकि, ऐसी कई सेवाएं हैं जो आपके लिए इसे बनाती हैं.
जैसा कि हमारे पिछले उदाहरणों में देखा जा सकता है, 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: यह विकल्प नहीं दिखता. हालांकि, स्क्रिप्ट इसका इस्तेमाल कर सकती हैं.
अब आपको अपने वेब पेज पर वीडियो उपलब्ध कराने और उसे ऐक्सेस करने के बारे में बुनियादी बातें पता चल गई हैं. इसलिए, हो सकता है कि आपको ज़्यादा मुश्किल इस्तेमाल के उदाहरणों के बारे में जानना हो. मीडिया फ़्रेमवर्क के बारे में जानें. साथ ही, यह भी जानें कि ये बेहतर सुविधाएं उपलब्ध कराते हुए, आपके वेब पेज पर वीडियो जोड़ने में कैसे मदद कर सकते हैं.