HTML5 <track> Tag

Introduction to HTML5 <track> Tag

Internet की दुनिया में आजकल multimedia (Audio/Video) का चलन जोरों पर है। अब लगभग 100 में से 50 लोग किसी भी content को search करते समय video के लिए search करते है। इसका मुख्य कारण ये है की Multimedia user experience को बढ़ाता है।

जैसा की आपको पता है HTML5 भी multimedia के लिए full support provide करती है। HTML5 में multimedia support के लिए <audio>, <video> और <source> जैसे महत्वपूर्ण tags available है। इसी कड़ी में user experience को और भी अधिक improve करने के लिए HTML5 <track> tag provide करती है।

<track> tag audio और video elements के लिए text tracks specify करता है। Text track में वह text होता है जो आप audio या video को play होते समय show करना चाहते है। Text के रूप में subtitles, caption, description और metadata हो सकता है।

Subtitles और caption जैसी information से user आपके content को और भी बेहतर तरीके से समझ पाता है जिससे user experience improve होता है।

Syntax of HTML5 <track> Tag

<track> tag का general syntax निचे दिया जा रहा है।

<track src="URL-of-track-file">

जैसा की आप ऊपर दिए गए syntax में देख सकते है <track> tag का कोई closing tag नहीं होता है। <track> tag हमेशा video या audio tag के अंदर ही define किया जाना चाहिए। साथ ही यदि आप <audio> और <video> tag के अंदर <soruce> tag use कर रहे है तो <track> tag को सभी <source> tags के बाद define किया जाना चाहिए।

Attributes of HTML5 <track> Tag

<track> tag के साथ आपको निचे दिए गए attributes available है।

  • default - यह एक boolean attribute होता है। इस attribute से पता चलता है की track default track है। यदि user किसी दूसरे track को select नहीं करता है तो यही track by default enabled रहता है।
  • kind - इस attribute से define किया जाता है की define किया गया track किस तरह का track है। इस attribute की 5 possible values हो सकती है।
    • Subtitles
    • Captions
    • Metadata
    • Chapters
    • Descriptions
  • label - इस attribute के द्वारा track का title define किया जाता है।
  • src - इस attribute के द्वारा track file का URL define किया जाता है।
  • srclang - इस attribute के द्वारा track की language define की जाती है। उदाहरण के लिए English track के लिए en और Hindi track के लिए hi define किया जाता है।

<track> tag HTML के सभी global और event attributes को भी support करता है।

Example of HTML5 Tag

<html>
<head>
<title>HTML5 track tag</title>
</head>

<body>
<h1>My favourite Video Song</h1>

<video controls>
<source src="videos/playlist/favourite.mp4" type="video/mp4">
<track src="videos/subtitles/sub_hindi.vtt" kind="subtitles" srclang="hi" label="Hindi">
</video>

</body>

</html>

Related Posts