Audio And Video in HTML
?? Audio and Video in HTML
HTML5 introduced the <audio> and <video> elements to embed audio and video content directly into web pages without needing plugins like Flash.
? <audio> Tag — Embedding Audio
? Basic Syntax
<audio controls> <source src="sound.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio>? Audio Attributes
| Attribute | Description |
|---|---|
controls | Shows audio controls (play, pause, volume) |
autoplay | Plays automatically when the page loads |
loop | Repeats audio continuously |
muted | Mutes the audio by default |
preload | Suggests how the audio should be loaded |
? Use multiple formats for browser support:
<audio controls> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio>? <video> Tag — Embedding Video
? Basic Syntax
<video width="640" height="360" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag.</video>? Video Attributes
| Attribute | Description |
|---|---|
controls | Shows play, pause, volume, etc. |
autoplay | Plays automatically when loaded |
loop | Repeats video automatically |
muted | Mutes the video by default |
poster | Image displayed before video starts |
preload | Preloading hint for browser |
width / height | Sets video dimensions |
? Use multiple formats for compatibility:
<video width="640" height="360" controls> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag.</video>? Accessibility Tip
Add text alternatives or transcripts for audio/video content to make it accessible:
<p>Audio transcript: This is a description of the sound.</p>? Full Example — Audio and Video Together
<h2>Audio Example</h2><audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> Your browser does not support the audio element.</audio><h2>Video Example</h2><video width="600" controls poster="thumbnail.jpg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser does not support the video element.</video>Would you like help adding custom play/pause buttons or styling the media player with CSS or JavaScript?
