HTML केवल टेक्स्ट दिखाने का ज़रिया नहीं है — इसमें हम वीडियो, ऑडियो, और यहां तक कि PDF डॉक्युमेंट्स भी दिखा सकते हैं। इस ब्लॉग में हम जानेंगे कि HTML में इन तीनों मीडिया टाइप्स को कैसे जोड़ा जाता है और कौन-कौन से टैग्स इस्तेमाल होते हैं।
🎥 HTML <video> टैग
क्या करता है?
<video> टैग का उपयोग वेबपेज में वीडियो एम्बेड करने के लिए किया जाता है।
बेसिक सिंटैक्स:
<video width="600" height="400" controls>
<source src="video.mp4" type="video/mp4" />
आपका ब्राउज़र वीडियो सपोर्ट नहीं करता।
</video>
प्रमुख attributes:
| Attribute | काम |
|---|---|
controls |
वीडियो कंट्रोल्स (play, pause, volume) दिखाता है |
autoplay |
पेज लोड होते ही वीडियो चलने लगे |
loop |
वीडियो खत्म होते ही फिर से शुरू हो जाए |
muted |
वीडियो बिना आवाज़ के शुरू हो |
poster |
वीडियो लोड होने से पहले एक थंबनेल इमेज दिखाए |
🎬 Example:
<video width="500" controls autoplay muted poster="/poster.jpg">
<source src="/media/demo-video.mp4" type="video/mp4" />
</video>
🎧 HTML <audio> टैग
क्या करता है?
<audio> टैग का उपयोग ऑडियो प्लेयर एम्बेड करने के लिए किया जाता है।
सिंटैक्स:
<audio controls>
<source src="audio.mp3" type="audio/mp3" />
आपका ब्राउज़र ऑडियो सपोर्ट नहीं करता।
</audio>
प्रमुख attributes:
| Attribute | काम |
|---|---|
controls |
प्ले/पॉज़ कंट्रोल |
autoplay |
पेज लोड पर ऑडियो चलना शुरू हो |
loop |
दोहराए |
muted |
म्यूट शुरू हो |
🎵 Example:
<audio controls loop>
<source src="/media/bhajan.mp3" type="audio/mp3" />
</audio>
📄 HTML में PDF कैसे जोड़ें?
PDF फाइल को वेबपेज पर एम्बेड करने के 2 मुख्य तरीके हैं:
✅ 1. <embed> टैग का उपयोग
<embed
src="/docs/sample.pdf"
type="application/pdf"
width="100%"
height="600px"
/>
✅ 2. <iframe> टैग का उपयोग
<iframe src="/docs/sample.pdf" width="100%" height="600px"></iframe>
📝 ध्यान दें: कुछ ब्राउज़र्स में PDF देखने के लिए एक्सटेंशन या प्लगइन की आवश्यकता हो सकती है।
📚 सभी टैग्स का एक साथ उदाहरण:
<h2>वीडियो डेमो</h2>
<video width="500" controls>
<source src="/media/demo-video.mp4" type="video/mp4" />
</video>
<h2>ऑडियो डेमो</h2>
<audio controls>
<source src="/media/demo-audio.mp3" type="audio/mp3" />
</audio>
<h2>PDF डेमो</h2>
<embed
src="/docs/sample.pdf"
type="application/pdf"
width="100%"
height="600px"
/>
🧠 निष्कर्ष
HTML में मीडिया जोड़ना आज के मॉडर्न वेब के लिए ज़रूरी हो गया है। <video>, <audio>, और <embed> या <iframe> जैसे टैग्स की मदद से आप अपने वेबपेज को ज्यादा इंटरैक्टिव और इनफॉर्मेटिव बना सकते हैं।
👉 अगली बार जब आप कोई वेब प्रोजेक्ट बनाएं, तो इन टैग्स का सही इस्तेमाल ज़रूर करें।