Media Types

🔀 Source & Track — Multiple Formats Aur Subtitles

<source> multiple format options deta hai — browser pehla jo support kare wo pick karta hai. <track> subtitles/captions add karta hai — accessibility ke liye aur non-native speakers ke liye zaroori.

<source> <audio> ya <video> ke andar aata hai. Har source mein src (file path) aur type (MIME type) hota hai. <track> WebVTT (.vtt) subtitle file se link karta hai. kind attribute specify karta hai: subtitles, captions, descriptions, ya chapters.

🛺

Menu Analogy: jaise menu mein multiple options — "MP4, WebM, ya OGG hai — jo kha sako wo lo." jaise menu ka translation — same khana, par ab apni language mein padh sakte ho.

Code Example

HTML — Source & Track — Multiple Formats Aur Subtitles

<!-- Format fallback ke liye source tags -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Video supported nahi
</video>

<!-- Subtitles ke liye track tag -->
<video controls src="video.mp4">
  <track 
    kind="subtitles" 
    src="subs-en.vtt" 
    srclang="en" 
    label="English"
  >
  <track 
    kind="subtitles" 
    src="subs-hi.vtt" 
    srclang="hi" 
    label="Hindi"
  >
  <track 
    kind="captions" 
    src="subs-cc.vtt" 
    srclang="en" 
    label="English CC"
    default
  >
</video>

<!-- WebVTT file example (subs-en.vtt) -->
/*
WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to Charminar, Hyderabad

00:00:05.000 --> 00:00:09.000
Built in 1591 by Muhammad Quli Qutb Shah

00:00:10.000 --> 00:00:14.000
This monument has four grand arches
*/

<source src="..."File path ke saath format option

type="video/mp4"MIME type — browser download se pehle check karta hai

kind="subtitles"Non-native speakers ke liye translation

kind="captions"Deaf/hard-of-hearing ke liye (sound effects include)

kind="descriptions"Blind users ke liye audio descriptions

kind="chapters"Navigation ke liye chapter markers

srclang="en"Language code (ISO 639-1)

label="English"CC menu mein dikhne wala human-readable label

defaultYeh track by default ON ho

WEBVTT formatSubtitle file format — timestamp --> text pairs

✅ When to Use

Multiple format support ke liye hamesha <source> use karo
Non-native speakers ke liye subtitles
Deaf/hard-of-hearing accessibility ke liye captions
Blind users ke liye descriptions (audio description track)
Long videos mein chapters (navigation markers)

❌ When NOT to Use

Single source jab sure ho sab users support karte (risky)
Review ke bina auto-generated subtitles (errors users ko confuse karte hain)
Audio elements pe track (subtitles sirf video ke liye hain)

💡

pe default attribute important hai — browser ko kehta hai "ye by default ON karo." Bina iske subtitles OFF hain aur users manually enable karna padega. Accessibility ke liye captions default ON hone chahiye.

← Back to Audio & Video Chapter