HTML Multimedia Elements

Learn how to embed multimedia content like audio and video in your HTML documents.

Multimedia Elements

Incorporating multimedia elements such as audio and video enhances the interactivity and engagement of your web pages. HTML provides <audio> and <video> tags for embedding these types of media.

`<audio>` Element

Used to embed sound content in documents.

Syntax

1<audio controls>
2  <source src="audio-file.mp3" type="audio/mpeg" />
3  <source src="audio-file.ogg" type="audio/ogg" />
4  Your browser does not support the audio element.
5</audio>

Example

1<audio controls>
2  <source src="music.mp3" type="audio/mpeg" />
3  <source src="music.ogg" type="audio/ogg" />
4  Your browser does not support the audio element.
5</audio>

`<video>` Element

Used to embed video content in documents.

Syntax

1<video width="640" height="480" controls>
2  <source src="video.mp4" type="video/mp4" />
3  <source src="video.ogg" type="video/ogg" />
4  Your browser does not support the video tag.
5</video>

Example with Subtitles

1<video width="640" height="480" controls>
2  <source src="movie.mp4" type="video/mp4" />
3  <source src="movie.ogg" type="video/ogg" />
4  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" />
5  Your browser does not support the video tag.
6</video>

Browser Compatibility

Multiple Source Formats: Provide multiple formats (.mp4, .ogg, .webm) to ensure compatibility across different browsers.
Fallback Content: Always include fallback text for browsers that do not support the media elements.

1<video controls>
2  <source src="video.mp4" type="video/mp4" />
3  <source src="video.webm" type="video/webm" />
4  Your browser does not support the video tag.
5</video>