HTML Audio and Video Elements Tutorial

1. The <audio> Element

The <audio> element is used to embed sound content in a document. It can contain various attributes for better control over playback.

Here’s an example of how to use the <audio> element:

Edit Copy

<audio controls>
    <source src="audio/song.mp3" type="audio/mpeg">
    <source src="audio/song.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>
                    

In this example, the controls attribute adds playback controls for the user.

2. The <video> Element

The <video> element is used to embed video content. It offers similar attributes to the audio element for controlling playback.

Here’s how to use the <video> element:

Edit Copy

<video controls width="600">
    <source src="video/movie.mp4" type="video/mp4">
    <source src="video/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>
                    

Similar to the audio element, the controls attribute provides playback controls for the video.

3. Attributes of Audio and Video Elements

Both the <audio> and <video> elements support a variety of attributes:

• controls: Adds playback controls.
• autoplay: Starts playing the media automatically (not recommended for videos due to user experience).
• loop: Loops the media playback.
• muted: Mutes the media by default.
• preload: Suggests how the author wants the browser to load the media (e.g., none, metadata, auto).

Example using multiple attributes:

Edit Copy

<audio controls autoplay loop muted>
    <source src="audio/song.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
                    

4. Conclusion

HTML audio and video elements provide powerful tools for incorporating multimedia content into your web pages. By utilizing these elements and their attributes, you can create an engaging user experience.