📘 Lesson · Lesson 15
Audio and Video Tags
Audio और Video Tags
The audio Tag — a music player in one line
<audio src="school-anthem.mp3" controls></audio>[▶ ──────●────── 1:23/3:45 🔊] ← browser's built-in player appears
Before HTML5, playing a sound needed Flash plugins. Now one tag gives you a complete player.
controls is the key attribute — without it the player is invisible (audio exists but the user has no buttons!). Other useful ones: loop (repeat forever), muted (start silent), preload="none" (don't download until play — saves visitor data).The video Tag — same idea plus a screen
<video src="annual-day.mp4" controls width="640" height="360"
poster="annual-day-cover.jpg">
Your browser does not support the video tag.
</video>[cover image with a ▶ button; clicking plays the video with full controls]
| Attribute | Job |
|---|---|
| controls | Show play/pause/volume/seek bar — almost always wanted |
| poster | Cover image BEFORE play (else first frame shows — often an ugly black frame) |
| width/height | Reserve space — the same layout-shift rule as images |
| loop | Restart automatically at the end |
| muted | Start without sound |
The text between the tags is the fallback — shown only by ancient browsers that don't know the tag. Modern browsers ignore it.
Multiple Sources — one video, several formats
<video controls width="640">
<source src="annual-day.webm" type="video/webm">
<source src="annual-day.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>The browser goes down the list and plays the FIRST format it supports — webm (smaller) if possible, mp4 (universal) otherwise. In practice today, MP4 (H.264) alone plays everywhere, so a single src is usually enough; the source pattern matters when you add webm for bandwidth savings.
The autoplay Rule — why your autoplay "doesn't work"
<video src="promo.mp4" autoplay></video> ❌ browsers BLOCK this
<video src="promo.mp4" autoplay muted loop></video> ✅ plays (silent)Every modern browser blocks autoplay WITH sound — the whole internet suffered from screaming ads, so Chrome/Firefox/Safari now allow autoplay only when
muted is present. This is the answer to the eternal "autoplay is not working" question: it works, silently, and only silently. The muted+autoplay+loop trio is exactly how hero-section background videos are done.Own Video vs YouTube iframe — the honest comparison
| <video> (own file) | YouTube iframe | |
|---|---|---|
| Hosting cost/bandwidth | YOUR server pays — heavy on shared hosting | YouTube pays |
| Ads/branding | None — fully yours | YouTube logo, possible ads |
| Quality switching | Manual (you'd encode versions) | Automatic (144p–4K) |
| Best for | Short clips (5-30s), background loops | Full-length videos |
Rule of thumb for shared hosting: anything over ~30 seconds → upload to YouTube, embed the iframe. Short silent loops → the video tag.
audio Tag — एक line में music player
<audio src="school-anthem.mp3" controls></audio>[▶ ──────●────── 1:23/3:45 🔊] ← browser का built-in player आ जाता है
HTML5 से पहले आवाज़ चलाने को Flash plugins चाहिए थे. अब एक tag पूरा player देता है.
controls ही key attribute है — इसके बिना player अदृश्य है (audio मौजूद है पर user के पास buttons नहीं!). और काम के: loop (हमेशा repeat), muted (चुप शुरू), preload="none" (play तक download नहीं — visitor का data बचता है).video Tag — वही idea plus screen
<video src="annual-day.mp4" controls width="640" height="360"
poster="annual-day-cover.jpg">
Your browser does not support the video tag.
</video>[▶ button वाली cover image; click पर पूरे controls के साथ video चलता है]
| Attribute | काम |
|---|---|
| controls | Play/pause/volume/seek bar दिखाए — लगभग हमेशा चाहिए |
| poster | Play से PEHLE की cover image (वरना पहला frame दिखता है — अक्सर काला बदसूरत frame) |
| width/height | जगह reserve — images वाला ही layout-shift rule |
| loop | खत्म होते ही अपने आप restart |
| muted | बिना आवाज़ शुरू |
Tags के बीच का text fallback है — सिर्फ वे प्राचीन browsers दिखाते हैं जो tag नहीं जानते. Modern browsers ignore करते हैं.
Multiple Sources — एक video, कई formats
<video controls width="640">
<source src="annual-day.webm" type="video/webm">
<source src="annual-day.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Browser list में ऊपर से नीचे जाकर PEHLA supported format चलाता है — हो सके तो webm (छोटा), वरना mp4 (universal). आज practice में अकेला MP4 (H.264) हर जगह चलता है, तो एक src आमतौर पर काफी है; source pattern तब काम आता है जब bandwidth बचाने को webm जोड़ें.
autoplay का Rule — आपका autoplay "काम क्यों नहीं करता"
<video src="promo.mp4" autoplay></video> ❌ browsers ise BLOCK karte hain
<video src="promo.mp4" autoplay muted loop></video> ✅ chalta hai (chupchap)हर modern browser आवाज़ WALA autoplay block करता है — चीखते ads से पूरा internet परेशान था, तो Chrome/Firefox/Safari अब autoplay तभी allow करते हैं जब
muted लगा हो. "autoplay काम नहीं कर रहा" वाले अमर सवाल का जवाब यही है: करता है, चुपचाप, और सिर्फ चुपचाप. muted+autoplay+loop की तिकड़ी ही hero-section के background videos का तरीका है.अपना Video vs YouTube iframe — ईमानदार comparison
| <video> (अपनी file) | YouTube iframe | |
|---|---|---|
| Hosting खर्च/bandwidth | AAPKA server भरता है — shared hosting पर भारी | YouTube भरता है |
| Ads/branding | कुछ नहीं — पूरा आपका | YouTube logo, ads possible |
| Quality switching | Manual (आपको versions बनाने पड़ें) | Automatic (144p–4K) |
| Best for | छोटे clips (5-30s), background loops | पूरी लंबाई के videos |
Shared hosting का rule of thumb: ~30 second से लंबा कुछ भी → YouTube पर डालकर iframe embed. छोटे silent loops → video tag.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.