HTML Audio and Video Elements Tutorial

HTML provides native support for audio and video elements, allowing you to embed media directly into your web pages. This tutorial will guide you through the use of these elements and their attributes.

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:


<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:


<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:


<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.

Note: We aim to make learning easier by sharing top-quality tutorials, but please remember that tutorials may not be 100% accurate, as occasional mistakes can happen. Once you've mastered the language, we highly recommend consulting the official documentation to stay updated with the latest changes. If you spot any errors, please feel free to report them to help us improve.

top-home