HTML Media का उपयोग वेब पेज में Audio (आवाज़), Video (वीडियो), और अन्य Multimedia Files को जोड़ने के लिए किया जाता है। HTML5 ने Media को आसान बनाने के लिए कई नए टैग दिए हैं।
वेबसाइट में Media का उपयोग करके हम:
- वीडियो ट्यूटोरियल दिखा सकते हैं।
- गाने या Podcast चला सकते हैं।
- Animation और अन्य Multimedia Content जोड़ सकते हैं।
HTML Media के प्रकार
HTML में मुख्य रूप से Media के तीन प्रकार होते हैं:
- Audio Media (ध्वनि)
- Video Media (वीडियो)
- Embedded Media (बाहरी Media जोड़ना)
1. HTML Audio (<audio> Tag)
<audio> टैग का उपयोग HTML पेज में Audio File चलाने के लिए किया जाता है।
Syntax:
<audio controls>
<source src="song.mp3" type="audio/mp3">
</audio>Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Audio Example</title>
</head>
<body>
<h2>My Audio</h2>
<audio controls>
<source src="C:\Users\lenovo\Downloads\ttsmaker-file-2026-5-31-13-3-38.mp3" type="audio/mp3">
</audio>
</body>
</html>Output :
Audio Tag के Attributes
1. controls
Controls का use Audio Player मैं Play Button, Pause Button, और Volume को Controls करने के लिए किया जाता है।
<audio controls>Controls में:
- Play Button
- Pause Button
- Volume Control
दिखाई देते हैं।
2. autoplay
Autoplay का use Audio को अपने आप चलाने के लिए किया जाता है।
<audio autoplay>3. loop
Loop का use Audio को बार-बार चलाने के लिए किया जाता है।
<audio loop>4. muted
Muted का use Audio की आवाज बंद रखने के लिए किया जाता है।
<audio muted>5. src (source)
src Audio File का रास्ता बताता है। यानी उसका path कौन-सा है?
<audio src="song.mp3">2. HTML Video (<video> Tag)
<video> टैग का उपयोग वेबसाइट में Video दिखाने के लिए किया जाता है।
Syntax:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML video Example</title>
</head>
<body>
<h2>My video</h2>
<video width = "500" controls>
<source src= "https://youtube.com/shorts/_sZayA549TM?si=8YiejESr7b85jcsI" type="video/mp4">
</video>
</body>
</html>Video Tag के Attributes
1. controls
Controls का use Video के अंदर play, pause, volume, और Full screen को Controls करने के लिए किया जाता है।
<video controls>इसमें:
- Play
- Pause
- Volume
- Full Screen
होता है।
2. width
Width का use Video की चौड़ाई सेट करने के लिए किया जाता है |
<video width="600">3. height
Height का use Video की ऊंचाई सेट करने के लिए किया जाता है |
<video height="400">4. autoplay
Autoplay का use Video को Automatic Play चलाने के लिए किया जाता है |
<video autoplay>5. loop
Loop का use Video को बार-बार चलाने के लिए किया जाता है |
<video loop>6. muted
Muted का use Video की आवाज बंद करने के लिए किया जाता है |
<video muted>7. poster
Poster का use Video शुरू होने से पहले Image दिखाने के लिए किया जाता है |
<video poster="image.jpg">3. HTML iframe Tag (External Media)
<iframe> का उपयोग किसी दूसरी Website या YouTube Video को अपने Web Page में दिखाने के लिए किया जाता है।
Syntax:
<iframe src="URL"></iframe>4. HTML <track> Tag
इसका उपयोग Video में Subtitle जोड़ने के लिए किया जाता है।
Example :
<video controls>
<source src="movie.mp4">
<track src="subtitles.vtt"
kind="subtitles"
srclang="en">
</video>