The <audio> and <video> elements in HTML5 are used to embed media files directly into a webpage. They provide native playback controls and allow interaction without needing external plugins like Flash.
1️⃣ <audio> Element
- Used to embed sound files (MP3, WAV, OGG).
- Supports controls, autoplay, loop, and mute attributes.
Example:
<audio controls>
<source src="audio/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
- Attributes:
controls→ shows play/pause/volume UIautoplay→ play automaticallyloop→ repeat the audiomuted→ start muted
2️⃣ <video> Element
- Used to embed video files (MP4, WebM, OGG).
- Supports controls, autoplay, loop, muted, width, height.
Example:
<video width="640" height="360" controls>
<source src="video/movie.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
- Attributes:
controls→ shows playback UIautoplay→ auto-play videoloop→ repeat videomuted→ start mutedposter→ image shown before playback
💡 In Short:
<audio>is for sound files,<video>is for video files. Both allow native playback with controls, autoplay, looping, and accessibility without plugins.
