HTML track एलिमेंट बनाएँ
या सबटाइटल टेक्स्ट पेस्ट करें
विकल्प
सबटाइटल उन दर्शकों के लिए हैं जो आवाज़ सुन सकते हैं और शब्द चाहते हैं — अनुवाद, या उसी भाषा में लिखा हुआ। कैप्शन उन दर्शकों के लिए हैं जो सुन नहीं सकते, इसलिए वे वह भी ले जाते हैं जो आवाज़ बाकी सबको बताती है: संगीत, दरवाज़ा, फ़ोन की घंटी। एक ही फ़ाइल दोनों मक़सद पूरे कर सकती है, इसीलिए पेज अनुमान लगाने के बजाय पूछता है, और यह मान बाद में एलिमेंट के भीतर से बदला नहीं जा सकता। विवरण, अध्याय और मेटाडेटा नहीं दिए जाते: इनमें से कोई भी सबटाइटल फ़ाइल की सामग्री से नहीं भरा जा सकता।
en, en-GB या pt-BR जैसा छोटा भाषा टैग, जो सबटाइटल के शब्दों की भाषा बताता है, वीडियो की भाषा नहीं। जो ट्रैक खुद को subtitles कहता है उसे भाषा बतानी ही होती है, इसलिए यह बॉक्स खाली करने पर en पर लौटा जाता है, विशेषता हटाई नहीं जाती — और चूँकि हर विशेषता आउटपुट में छपती है, आप कुछ पेस्ट करने से पहले लौटाव देख सकते हैं।
मुक्त टेक्स्ट: English, English (SDH), Français। यही वह पंक्ति है जिसे दर्शक तब चुनता है जब पेज एक से ज़्यादा ट्रैक देता है, इसलिए इसे वैसे लिखें जैसे आपके दर्शक पहचानें। बॉक्स साफ़ करने पर विशेषता खाली लिखने के बजाय पूरी हट जाती है, जो नामकरण प्लेयर को लौटा देती है; खाली लेबल उस मेन्यू में बिना नाम की पंक्ति डाल देगा।
चालू पर सबटाइटल वीडियो चलते ही आ जाते हैं। किसी मीडिया एलिमेंट में केवल एक डिफ़ॉल्ट ट्रैक हो सकता है, इसलिए जब पेज पर पहले से एक हो तो इसे बंद रखें: दूसरा ट्रैक खुद को डिफ़ॉल्ट कहने पर प्लेयर गलत चुन लेते हैं, जबकि डिफ़ॉल्ट न होने का मतलब केवल यह है कि दर्शक इसे खुद चालू करेगा।
टाइमिंग किस फ़्रेम रेट में गिनी गई है। फ़ॉर्मैट पेजों पर यही MicroDVD को चाहिए, क्योंकि वह टाइमिंग फ़्रेम संख्याओं में रखता है। फ़्रेम रेट पेजों पर यह वह रेट है जिसके हिसाब से फ़ाइल की टाइमिंग की गई थी — वह संस्करण जिसके लिए सबटाइटल बने थे — और पेज का दूसरा बॉक्स उस वीडियो का रेट लेता है जिसके साथ आप इन्हें इस्तेमाल करेंगे। 23.976, 24, 25, 29.97, 30, 50, 59.94 और 60 आम हैं। गलत होने पर पूरी टाइमलाइन खिसक जाती है, और फ़्रेम रेट पेजों पर वह एक अनुपात से खिसकती है, तय मात्रा से नहीं।
यह पेज एक सबटाइटल फ़ाइल को HTML के एक <track> एलिमेंट में बदलता है: एक ही पंक्ति का markup जिसे आप अपने वीडियो पेज में चिपका सकते हैं। WebVTT सामग्री src attribute में data URI के रूप में एलिमेंट के अंदर ही आ जाती है, इसलिए साथ में कोई अलग .vtt फ़ाइल रखने की ज़रूरत नहीं — एक फ़ाइल, एक एलिमेंट, एक जगह। नतीजा कोई .html दस्तावेज़ नहीं है, बल्कि वह अकेला एलिमेंट है जिसे आप अपनी मौजूदा पेज की पंक्ति में रखते हैं।
चार चीज़ें तय करती हैं कि एलिमेंट क्या कहेगा, और पेज पर उनके चार बक्से हैं। kind बताता है कि ट्रैक subtitles है या captions — दूसरा उन दर्शकों के लिए है जो सुन नहीं सकते और इसलिए ध्वनि-प्रभाव तथा संगीत भी पढ़ते हैं। srclang पाठ की भाषा है, label वह नाम है जो दर्शक प्लेयर के सबटाइटल मेनू में चुनता है, और default तय करता है कि ट्रैक अपने आप खुले या दर्शक चुने। खाली बक्से बिना सोचे नहीं छोड़े जाते: HTML कुछ चीज़ें माँगता है और कुछ नहीं, इसलिए पेज हर बक्से का असर अलग-अलग बताता है।
एक बात जिसे हाथ से लिखते समय लोग चूकते हैं: inside a data URI, रिक्त स्थान, line breaks, quote और प्रतिशत चिह्न सीधे नहीं रखे जा सकते। पेज वह encoding करता है, और यही वजह है कि src attribute अपठनीय दिखता है — वह सामग्री नहीं, उसका URI-encoded रूप है। अगर मेनू नाम में कोई quote या & है तो वह भी escaped होकर आता है, वरना वह attribute को बीच में बंद कर देता और बाकी नाम गड़बड़ attributes बन जाता। सब कुछ इस टैब में बनता है, कोई फ़ाइल अपलोड नहीं होती, और नतीजा कॉपी करके सीधे अपने markup में रखा जा सकता है।
उदाहरण
SRT फ़ाइल, डिफ़ॉल्ट बक्सों के साथ
इनपुट
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
आउटपुट
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
एक पंक्ति बाहर, और पूरी फ़ाइल उसके अंदर: %0A line break है और %20 रिक्त स्थान, इसलिए WebVTT पेज के बगल में पड़ी फ़ाइल की जगह src attribute में सवार हो जाती है। चार attributes वही चार बक्से हैं — पाठ की भाषा, प्लेयर मेनू में दिखने वाला नाम, और default, जिससे ट्रैक अपने आप खुलता है। SRT के cue numbers cue identifiers के रूप में बने रहते हैं।
WebVTT फ़ाइल वही WebVTT बनकर आती है
इनपुट
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
आउटपुट
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
क्यू के बाहर की हर चीज़ बचती है: WEBVTT पंक्ति पर टिप्पणी, NOTE ब्लॉक, STYLE ब्लॉक जो प्लेयर में सबटाइटल का रूप तय करता है, क्यू की नाम-पंक्ति, और प्रति-क्यू setting align:start position:10% (इसमें %25 प्रतिशत चिह्न है, URI में सीधा प्रतिशत चिह्न अनुमत नहीं इसलिए encoded)। जो फ़ाइल WebVTT बनकर आई वह उसी WebVTT के रूप में जाती है। दो बक्से en-GB और English (UK) कहते हैं, क्योंकि यह प्रति ब्रिटिश दर्शकों के लिए बनी है — फ़ाइल में कुछ भी यह नहीं कहता।
जो दर्शक सुन नहीं सकते उनके लिए सबटाइटल
इनपुट
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
आउटपुट
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
फ़ाइल ध्वनि-प्रभाव और संगीत से भरी है, और kind="captions" ठीक इसीलिए है — जो दर्शक सुन नहीं सकते उनके लिए सबटाइटल — और वह बक्सा ही यह कह सकता है। अलग से, मेनू नाम Tom & "the boss" लिखा गया और Tom & "the boss" बनकर आता है: बिना escape किया quote वहीं attribute बंद कर देता और बाकी नाम एलिमेंट पर गड़बड़ attributes बन जाता।
तीन बक्से खाली या बंद
इनपुट
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
आउटपुट
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
तीन बक्से बदले, तीन अलग नतीजे, क्योंकि HTML अलग-अलग चीज़ें माँगता है। मेनू नाम एलिमेंट से पूरी तरह गया — यह वैकल्पिक है और न देने पर फ़ैसला प्लेयर को जाता है। भाषा का बक्सा खाली है और फिर भी srclang="en" बनता है: जो ट्रैक खुद को subtitles कहता है उसे भाषा बतानी ही होती है, इसलिए खाली भाषा जैसी कोई चीज़ नहीं और fallback नतीजे में दिखता है। default बंद है और वह attribute भी गया, इसलिए यह ट्रैक अपने आप नहीं खुलेगा — जब पेज पर एक से ज़्यादा ट्रैक हों तो यही सुरक्षित दिशा है।
अक्सर पूछे जाने वाले सवाल
यह पेज कौन-सा HTML track एलिमेंट बनाता है?
एक <track> एलिमेंट जिसकी src attribute में आपका WebVTT data URI के रूप में अंदर है, और साथ में kind, srclang, label तथा ज़रूरत पर default। यह एलिमेंट किसी video या audio एलिमेंट के अंदर रखा जाता है। नतीजा पूरा HTML पेज नहीं, बल्कि वह एक पंक्ति है जिसे आप अपने मौजूदा markup में जोड़ते हैं।
क्या मुझे साथ में कोई .vtt फ़ाइल भी अपलोड करनी होगी?
नहीं। पूरी WebVTT सामग्री data URI के रूप में एलिमेंट के अंदर चली जाती है, इसलिए सर्वर पर अलग फ़ाइल रखने की ज़रूरत नहीं। कीमत यह है कि markup बड़ा हो जाता है और लंबी फ़ाइल के लिए बहुत बड़ा हो सकता है — कुछ हजार पंक्तियों से ज़्यादा की सबटाइटल के लिए अलग .vtt फ़ाइल बेहतर होती है। यह पेज दोनों रास्ते नहीं दिखाता; यह data URI वाला रास्ता है।
kind में subtitles और captions में क्या फ़र्क़ है?
subtitles उन दर्शकों के लिए है जो भाषा नहीं समझते या आवाज़ के बिना देख रहे हैं; captions उनके लिए है जो सुन नहीं सकते और इसलिए ध्वनि-प्रभाव, संगीत और वक्ता की पहचान भी पढ़ते हैं। यह फ़र्क़ सिर्फ़ नाम का नहीं — कुछ प्लेयर और सुगम्यता जाँच इसे पढ़ते हैं। यह पेज बक्सा बदलने के अलावा कुछ नहीं करता; सही चुनाव आपकी सामग्री पर है।
src attribute इतना अपठनीय क्यों दिखता है?
क्योंकि data URI में कुछ अक्षर सीधे नहीं रखे जा सकते। रिक्त स्थान %20 बनता है, line break %0A, प्रतिशत चिह्न %25, और इसी तरह। जो आप देखते हैं वह सामग्री का URI-encoded रूप है, न कि खराब हुआ पाठ; ब्राउज़र उसे खोलकर वही WebVTT पढ़ता है जो आपने डाला था।
srclang खाली छोड़ने पर क्या होता है?
वह en बनकर आता है। जो ट्रैक खुद को subtitles या captions कहता है उसे HTML में भाषा बतानी ही होती है, इसलिए वहाँ खाली मान जैसी कोई चीज़ नहीं; ब्राउज़र को fallback चाहिए और पेज en देता है। अगर सामग्री अंग्रेज़ी नहीं है तो बक्सा भरें — ग़लत srclang प्लेयर के मेनू और सुगम्यता उपकरणों को ग़लत भाषा बताता है।
मेनू नाम में quote या & रख सकता हूँ?
हाँ, और पेज उसे escape करता है: quote " बनता है और & &। बिना escape किया quote attribute को बीच में बंद कर देता और बाकी नाम गड़बड़ attributes बन जाता, इसलिए यह ज़रूरी है। escape के बाद नाम वैसा ही दिखता है जैसा आपने लिखा; बदलता सिर्फ़ markup में उसका रूप है।
यह जो markup बनाता है उसे कहाँ रखूँ?
अपने video या audio एलिमेंट के अंदर, उसके closing tag से पहले। यह पेज सिर्फ़ एलिमेंट बनाता है और उसे आपकी पेज की संरचना के बारे में कुछ नहीं पता — इसलिए उसे कहाँ रखना है यह आपका markup तय करता है। कॉपी किया हुआ एलिमेंट किसी भी स्टैटिक पेज में वैसे ही काम करता है, चाहे वह किसी साइट जनरेटर से बना हो या हाथ से लिखा।