Lesson 13: HTML5 Multimedia
HTML5 Multimedia Elements
HTML5 introduced native support for audio and video without needing plugins.
Key Elements:
- <video> - Embed video files
- <audio> - Embed audio files
- <iframe> - Embed external content (YouTube, maps)
Video Element
The <video> tag embeds video files directly in your webpage.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support video.
</video>
Video Attributes
| Attribute |
Description |
| controls |
Show play/pause controls |
| autoplay |
Start playing automatically |
| loop |
Repeat video when finished |
| muted |
Mute the audio |
| poster |
Image shown before video plays |
| width/height |
Video dimensions |
Video with All Attributes
<video width="640" height="360" controls loop poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
</video>
Audio Element
The <audio> tag embeds audio files in your webpage.
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support audio.
</audio>
Audio Attributes
| Attribute |
Description |
| controls |
Show play/pause controls |
| autoplay |
Start playing automatically |
| loop |
Repeat audio when finished |
| muted |
Mute the audio |
| preload |
How to load: none/metadata/auto |
Iframe Element
The <iframe> tag embeds external content like YouTube videos, Google Maps, or other websites.
Embedding YouTube Video
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media"
allowfullscreen>
</iframe>
Embedding Google Maps
<iframe
src="https://www.google.com/maps/embed?..."
width="600"
height="450"
style="border:0;"
allowfullscreen>
</iframe>
Embedding Another Website
<iframe src="https://www.example.com" width="800" height="600">
</iframe>
Supported File Formats
Video Formats
| Format |
Extension |
Browser Support |
| MP4 |
.mp4 |
All modern browsers |
| WebM |
.webm |
Chrome, Firefox, Opera |
| Ogg |
.ogg |
Firefox, Chrome, Opera |
Audio Formats
| Format |
Extension |
Browser Support |
| MP3 |
.mp3 |
All modern browsers |
| WAV |
.wav |
All modern browsers |
| Ogg |
.ogg |
Firefox, Chrome, Opera |
💡 Best Practices:
- Always include multiple formats for browser compatibility
- Add fallback text for unsupported browsers
- Use controls attribute for user control
- Don't use autoplay - it's annoying!
- Add subtitles/captions using <track> for accessibility
- Optimize video file sizes for web
Adding Subtitles
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
Practice Exercise
Try This:
Create a multimedia page with:
- A video player with controls
- An audio player for background music
- An embedded YouTube video
- A Google Maps iframe of your school/city