HTML5 – <audio> and <video> Tags
M2-R5.1 · Chapter 3: HTML Basics · 1 min read
HTML5 – <audio> AND <video> TAGS
HTML5 में multimedia content को webpage में directly add करने के लिए दो important elements introduce किए गए हैं:
<audio><video>
इनकी सहायता से webpage में sound और video files को बिना किसी external plugin, जैसे Flash, के embed और play किया जा सकता है।
🔹 1. <audio> TAG
Purpose
<audio> tag का उपयोग webpage में sound या music files को embed करने के लिए किया जाता है।
इसका उपयोग निम्न के लिए किया जा सकता है:
Songs
Music
Voice / Narration
Sound Effects
Audio Recordings
Basic Syntax
<audio src="music.mp3" controls>
</audio>
यहाँ:
<audio>→ Audio element को define करता है।src→ Audio file का path या URL specify करता है।controls→ Browser में audio controls जैसे Play, Pause और Volume दिखाता है।
🔹 Audio with controls
<audio src="music.mp3" controls>
</audio>
यदि controls attribute दिया गया है, तो browser audio player के controls display करेगा।
🔹 Important Attributes of <audio>
| Attribute | Description | Example |
|---|---|---|
| src | Audio file का path या URL specify करता है। | <audio src="song.mp3"> |
| controls | Audio player के controls display करता है। | <audio controls> |
| autoplay | Page load होने पर audio को automatically play करने के लिए। | <audio autoplay> |
| loop | Audio खत्म होने के बाद उसे बार-बार repeat करता है। | <audio loop> |
| muted | Audio को शुरुआत में mute रखता है। | <audio muted> |
| preload | Browser को बताता है कि audio को page load होने पर कितना load करना है। | <audio preload="auto"> |
🔹 Example of Audio
<html>
<head>
<title>Audio Example</title>
</head>
<body>
<h2>My Audio</h2>
<audio src="music.mp3" controls>
</audio>
</body>
</html>
इस webpage में music.mp3 file एक audio player के रूप में दिखाई देगी।
🔹 Using <source> Tag
एक audio file के लिए अलग-अलग formats provide करने के लिए <source> tag का उपयोग किया जा सकता है।
Syntax:
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
</audio>
Browser उपलब्ध formats में से supported format को play करने की कोशिश करेगा।
🔹 2. <video> TAG
Purpose
<video> tag का उपयोग webpage में video files को embed और play करने के लिए किया जाता है।
इसका उपयोग निम्न के लिए किया जा सकता है:
Educational Videos
Tutorials
Movies
Presentations
Video Clips
Basic Syntax
<video src="video.mp4" controls>
</video>
यहाँ:
<video>→ Video element को define करता है।src→ Video file का path या URL specify करता है।controls→ Video player के controls display करता है।
🔹 Video with controls
<video src="video.mp4" controls>
</video>
controls की सहायता से user video को:
Play
Pause
Volume control
Seek
Fullscreen
जैसे available controls से operate कर सकता है।
🔹 Important Attributes of <video>
| Attribute | Description | Example |
|---|---|---|
| src | Video file का path या URL specify करता है। | <video src="movie.mp4"> |
| controls | Video player के controls display करता है। | <video controls> |
| width | Video की width set करता है। | <video width="500"> |
| height | Video की height set करता है। | <video height="300"> |
| autoplay | Page load होने पर video को automatically play करता है। | <video autoplay> |
| loop | Video समाप्त होने के बाद उसे repeat करता है। | <video loop> |
| muted | Video को शुरुआत में mute रखता है। | <video muted> |
| poster | Video play होने से पहले दिखाई जाने वाली image specify करता है। | <video poster="image.jpg"> |
| preload | Browser को video को load करने के बारे में hint देता है। | <video preload="auto"> |
🔹 Example of Video
<html>
<head>
<title>Video Example</title>
</head>
<body>
<h2>My Video</h2>
<video src="video.mp4"
width="500"
height="300"
controls>
</video>
</body>
</html>
इसमें video.mp4 webpage पर video player के रूप में दिखाई देगा।
🔹 Using <source> Tag with Video
यदि अलग-अलग video formats provide करने हों, तो <source> tag का उपयोग किया जा सकता है।
Example:
<video width="500" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
Browser उपलब्ध और supported format को play करने की कोशिश करेगा।
🔹 AUDIO vs VIDEO
<audio> | <video> |
|---|---|
| Sound या music के लिए use होता है। | Video content के लिए use होता है। |
| Audio player display करता है। | Video player display करता है। |
Example: music.mp3 | Example: video.mp4 |
<audio> tag का उपयोग होता है। | <video> tag का उपयोग होता है। |
⭐ QUICK REVISION
Audio
<audio src="music.mp3" controls>
</audio>
➡️ Webpage में audio/music add करने के लिए।
Video
<video src="video.mp4" controls>
</video>
➡️ Webpage में video add करने के लिए।
Multiple Sources
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
➡️ Different media formats provide करने के लिए।