Chapter 7: HTML Audio and Video
7.1 Introduction to HTML Audio and Video
HTML allows embedding multimedia elements like audio and video directly into web pages using the <audio>
and <video>
tags.
7.2 The <audio>
Element
The <audio>
tag is used to play audio files. It supports multiple formats such as MP3, Ogg, and WAV.
Example:
<audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
7.3 The <video>
Element
The <video>
tag is used to embed video content on a webpage. It supports formats like MP4, WebM, and Ogg.
Example:
<video width="400" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video element. </video>
7.4 Attributes of <audio>
and <video>
Attribute | Description |
---|---|
controls |
Displays play, pause, and volume controls |
autoplay |
Automatically starts playing when the page loads |
loop |
Plays the media file in a loop |
muted |
Starts the media file with the sound muted |
7.5 Adding Subtitles with <track>
The <track>
tag is used to add subtitles or captions to videos.
Example:
<video width="400" controls> <source src="video.mp4" type="video/mp4"> <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English"> </video>
7.6 Summary
In this chapter, we covered:
- How to embed audio using
<audio>
- How to embed video using
<video>
- Common attributes like
controls
,autoplay
, andloop
- Adding subtitles with
<track>