लोड हो रहा है...

HTML ऑडियो और वीडियो

HTML ऑडियो और वीडियो टैग HTML5 में जोड़े गए ऐसे शक्तिशाली तत्व हैं जो वेबसाइट पर मीडिया कंटेंट को सीधे एम्बेड करने की सुविधा देते हैं — बिना किसी प्लगइन के। जैसे कोई पुस्तकालय एक अच्छे संगठन से उपयोगी बनती है, वैसे ही <audio> और <video> वेबसाइट को उपयोगकर्ता के लिए आकर्षक और संवादात्मक बनाते हैं।
पोर्टफोलियो वेबसाइट में वीडियो परिचय, ब्लॉग में पॉडकास्ट, ई-कॉमर्स साइट पर उत्पाद डेमो, न्यूज़ साइट पर समाचार क्लिप, और सोशल प्लेटफ़ॉर्म पर यूज़र जेनरेटेड कंटेंट दिखाने के लिए इन टैग्स का उपयोग बहुत फायदेमंद होता है।
इस ट्यूटोरियल में आप सीखेंगे कि ऑडियो और वीडियो को HTML में कैसे सम्मिलित किया जाए, कौन से एट्रिब्यूट्स (controls, autoplay, muted, loop) का क्या कार्य है, और कैसे <source> टैग से मल्टी-फॉर्मेट सपोर्ट प्रदान किया जाता है। यह बिलकुल वैसा है जैसे आप एक कमरे को सटीक ढंग से सजाते हैं — हर आइटम की जगह तय होती है ताकि वह कार्यात्मक और सुंदर दोनों दिखे।

मूल उदाहरण

html

HTML Code

<!-- Basic audio and video with controls -->
<audio controls>
<source src="song.mp3" type="audio/mpeg">
आपका ब्राउज़र ऑडियो टैग को सपोर्ट नहीं करता।
</audio>

<video controls width="320">
<source src="video.mp4" type="video/mp4">
आपका ब्राउज़र वीडियो टैग को सपोर्ट नहीं करता।
</video>

ऊपर के उदाहरण में दो HTML5 टैग हैं: <audio> और <video>। दोनों में एक <source> टैग है जो मीडिया फ़ाइल के स्थान (URL) और उसके MIME प्रकार (type) को निर्दिष्ट करता है।
controls एट्रिब्यूट ब्राउज़र को डिफ़ॉल्ट कंट्रोल्स (play, pause, volume) दिखाने का निर्देश देता है। अगर आपका ब्राउज़र इन फॉर्मेट्स को सपोर्ट नहीं करता, तो टैग्स के अंदर का टेक्स्ट (fallback message) प्रदर्शित होता है।
width एट्रिब्यूट वीडियो की चौड़ाई सेट करता है, जो वेबसाइट के डिज़ाइन के अनुरूप किया जाता है। <source> टैग का उपयोग इसीलिए किया जाता है ताकि आप मल्टी-फॉर्मेट सपोर्ट जोड़ सकें (जैसे MP4, WebM, Ogg)।
यह कोड शुरुआती और पेशेवर दोनों के लिए उपयुक्त है — चाहे आप व्यक्तिगत पोर्टफोलियो बना रहे हों या कॉर्पोरेट साइट पर मीडिया एम्बेड कर रहे हों।

व्यावहारिक उदाहरण

html

HTML Code

<!-- Promotional video with autoplay and muted for ecommerce -->
<video autoplay muted loop width="480" playsinline>
<source src="product-demo.mp4" type="video/mp4">
आपका ब्राउज़र यह वीडियो नहीं चला सकता।
</video>

<!-- Background music for blog with autoplay and loop -->
<audio autoplay loop>
<source src="bg-music.mp3" type="audio/mpeg">
</audio>

सर्वोत्तम अभ्यास (Best Practices):

Semantic HTML: <audio> और <video> टैग का ही प्रयोग करें, div या JS-only समाधान न अपनाएं।
Accessibility (सुलभता): उपशीर्षक के लिए <track> टैग का उपयोग करें और टेक्स्ट फॉलबैक ज़रूर दें।
क्लीन मार्कअप: मल्टी-सोर्स सपोर्ट हेतु सही ढंग से <source> टैग्स का प्रयोग करें।
ब्राउज़र संगतता: एक से अधिक फॉर्मेट सपोर्ट करें (जैसे .mp4 + .webm)।
आम गलतियाँ (Common Mistakes):
MIME type न जोड़ना जिससे फाइल लोड नहीं होती।
Autoplay के साथ muted न देना — मोबाइल ब्राउज़र ब्लॉक कर देते हैं।
<source> को <video> के बाहर रखना — यह एक syntax error है।
कोई फॉलबैक टेक्स्ट न देना — उपयोगकर्ता को पता ही नहीं चलेगा कि कुछ गलत है।
Debugging टिप्स:

DevTools Console का उपयोग MIME errors और लोडिंग से जुड़ी समस्याएं समझने के लिए करें।
ब्राउज़र टेस्टिंग करें: Chrome, Firefox, Safari और मोबाइल डिवाइसेज़ पर चेक करें।
सर्वर द्वारा सही Content-Type हेडर भेजा जाना ज़रूरी है।

📊 त्वरित संदर्भ

Property/Method	Description	Example
controls	प्लेबैक कंट्रोल दिखाने के लिए	`<audio controls>`
autoplay	पेज लोड पर स्वतः चलाने के लिए	`<video autoplay>`
muted	वीडियो को म्यूट कर शुरू करने के लिए	`<video muted>`
loop	मीडिया को बार-बार चलाने के लिए	`<audio loop>`
preload	लोडिंग व्यवहार सेट करने के लिए	`<audio preload="metadata">`
playsinline	मोबाइल पर फुलस्क्रीन रोके	`<video playsinline>`

सारांश और अगले कदम:
इस गाइड में आपने सीखा कि HTML में ऑडियो और वीडियो को कैसे एम्बेड किया जाता है और विभिन्न एट्रिब्यूट्स का क्या महत्त्व है। <audio> और <video> टैग वेबसाइट को इंटरएक्टिव और उपयोगकर्ता-मित्र बनाते हैं, जैसे एक अच्छी तरह से व्यवस्थित पुस्तकालय।
अगले चरण में आप सीख सकते हैं कि CSS से वीडियो और ऑडियो प्लेयर को कैसे स्टाइल किया जाता है, और JavaScript के माध्यम से इनका इंटरैक्शन कैसे बढ़ाया जाता है (जैसे play(), pause(), volume कंट्रोल आदि)।
सुझावित विषय:

HTML <track> टैग और उपशीर्षक सपोर्ट
JavaScript Media API
Responsive Media Integration
वीडियो होस्टिंग और CDN इंटीग्रेशन

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपना ज्ञान परखें

व्यावहारिक प्रश्नों के साथ इस विषय की अपनी समझ का परीक्षण करें।

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा