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: