HTML Audio और Video Tags: controls और Source
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
HTML5 से पहले किसी वेब पेज पर गाना या वीडियो चलाने के लिए Flash जैसे plugin की ज़रूरत पड़ती थी। आज सिर्फ दो tags काफी हैं: आवाज़ के लिए <audio> और चलती तस्वीरों के लिए <video>। दोनों एक ही तरीके से काम करते हैं — आप उन्हें किसी media file की ओर इशारा करते हैं, controls attribute लगाते हैं, और browser खुद अपना player बना देता है, जिसमें play, pause, volume और seek bar होती है। कोई plugin नहीं, कोई JavaScript नहीं, कोई extra काम नहीं।
Controls attribute ही असली काम करता है
controls के बिना audio या video element अदृश्य और खामोश रहता है — वह load तो होता है, पर click करने को कुछ दिखाता नहीं। controls के साथ browser आपके लिए पूरा player बना देता है। दूसरे काम के attributes: loop media खत्म होने पर उसे फिर से चलाता है, muted उसे खामोश शुरू करता है, और preload browser को बताता है कि file पहले से download करनी है या इंतज़ार करना है। एक बात ध्यान रखें: ज़्यादातर browsers आवाज़ के साथ autoplay को block कर देते हैं — जो पेज अपने आप ज़ोर से संगीत बजाने लगे, उसे browsers जानबूझकर रोकते हैं।
Source fallbacks — एक file शायद ही कभी काफी हो
हर browser हर format नहीं चलाता। Audio के लिए MP3 लगभग हर जगह चलता है, पर कुछ browsers OGG पसंद करते हैं; video के लिए MP4 लगभग हर जगह चलता है, पर कुछ WebM पसंद करते हैं। इसका हल <source> tag है: दो या तीन files की सूची दीजिए, और browser पहली वह file चलाएगा जिसे वह समझता है। Tags के बीच का text fallback है — वह सिर्फ तब दिखता है जब browser कोई भी format नहीं चला पाता, इसलिए वहाँ कुछ मददगार लिखिए, जैसे "Your browser does not support this audio."
| Tag / attribute | क्या करता है |
|---|---|
<audio> | आवाज़ चलाता है — संगीत, podcast, voice note। |
<video> | वीडियो चलाता है — कोई lesson, demo, recording। |
controls | Browser का अपना player दिखाता है (play, pause, volume, seek)। |
<source src="..." type="..."> | Format का एक विकल्प। Browser पहला वह विकल्प चुनता है जिसे वह चला सके। |
loop | Media खत्म होने पर उसे दोहराता है। |
muted | खामोश शुरू करता है — autoplay के लिए ज़्यादातर browsers इसे ज़रूरी मानते हैं। |
width / height (सिर्फ video) | पेज पर video box का size। |
welcome.mp3, welcome.mp4) इस्तेमाल हुए हैं — उनके पीछे कोई असली media file नहीं है। असली पेज पर आप अपनी audio या video file upload करेंगे और src को उसकी ओर इशारा करेंगे। तब तक browser फिर भी अपना player बना देता है; बस उसके पास चलाने को कुछ नहीं होता, और output screenshot में ठीक यही दिखता है।<source> पर हमेशा type attribute दीजिए (जैसे type="audio/mpeg")। इससे browser उन formats को बिना download किए छोड़ देता है जिन्हें वह चला नहीं सकता — आपके visitors के लिए तेज़, आपके server के लिए सस्ता।आम गलतियाँ
controlsभूल जाना — media load तो हो जाता है, पर visitor को click करने को कुछ दिखता नहीं।- सिर्फ एक format देना — जिस browser में वह format नहीं चलता, वहाँ visitor को खामोशी मिलती है।
- आवाज़ के साथ
autoplayइस्तेमाल करना — browsers उसे block कर देंगे, और visitors को वैसे भी बुरा लगेगा। - Fallback text छोड़ देना — अगर कुछ नहीं चलता, तो visitor को यह जानने का हक है कि क्यों।
उदाहरण समझिए
<audio controls>— sound player।controlsकी वजह से browser अपने play और volume buttons बना देता है।<source src="welcome.mp3" type="audio/mpeg">— format का पहला विकल्प। MP3 लगभग हर browser में चलता है।<source src="welcome.ogg" type="audio/ogg">— backup format, उन browsers के लिए जो OGG पसंद करते हैं।Your browser does not support this audio.— fallback text, सिर्फ तब दिखता है जब कोई भी format नहीं चलता।<video controls width="320">— video player, 320 pixels चौड़ा, browser के अपने controls के साथ।<source src="welcome.mp4" type="video/mp4">— video file। Video के लिए MP4 सबसे सुरक्षित पहली पसंद है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Audio and Video</title>
</head>
<body>
<h1>Welcome to KAMALDNP Academy</h1>
<p>Listen to our welcome message:</p>
<audio controls>
<source src="welcome.mp3" type="audio/mpeg">
<source src="welcome.ogg" type="audio/ogg">
Your browser does not support this audio.
</audio>
<p>Watch our campus tour:</p>
<video controls width="320">
<source src="welcome.mp4" type="video/mp4">
<source src="welcome.webm" type="video/webm">
Your browser does not support this video.
</video>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. एचटीएमएल में आवाज़ और वीडियो के लिए कौन से टैग हैं?
आवाज़ के लिए ऑडियो और वीडियो के लिए वीडियो टैग है, और इनके लिए किसी प्लगइन या जावास्क्रिप्ट की ज़रूरत नहीं पड़ती।
2. कंट्रोल्स एट्रिब्यूट क्यों ज़रूरी है?
कंट्रोल्स के बिना मीडिया दिखाई नहीं देगा और सुनाई नहीं देगा, कंट्रोल्स से ब्राउज़र ख़ुद प्ले, पॉज़, वॉल्यूम और सीक बार वाला प्लेयर बना देता है।
3. एक से ज़्यादा सोर्स क्यों दिए जाते हैं?
हर ब्राउज़र हर फ़ॉर्मेट नहीं चला पाता, इसलिए ब्राउज़र पहली वही फ़ाइल चलाता है जो उसे समझ आती है, जैसे ऑडियो के लिए एमपी3 और वीडियो के लिए एमपी4।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
