Html( audio and video tags)

Html audio and video tags are used to add audio and video elements to a webpage. Here, we are going to talk about audio and video tags in detail.

Audio tag:

As discussed this tag is used to embed audio files in your Html document. The src attribute is used to specify the source of the audio file.

<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio
        controls
        src="/media/cc0-audio/t-rex-roar.mp3">
            <a href="/media/cc0-audio/t-rex-roar.mp3">
                Download audio
            </a>
    </audio>
</figure>

Let us discuss some of the attributes of the audio tag.

Autoplay:

If autoplay is specified within the audio tag, then the audio will automatically play without any action from the user.

Controls:

If this attribute is present, the browser will offer controls to allow the user to control audio playback including volume changes, and pause/play.

Other attributes are loop(to play the audio within the loop) and muted(to set the audio in silent mode, the default value is false). Every mentioned attribute apart from src and controls is a boolean attribute.

Video tag:

This tag is similar to an audio tag and it is just used to embed video instead of audio.

Video tags contain all the mentioned attributes of an audio tag. To understand video tag attributes, just read the audio tag attributes (replacing the audio with video). There are some extra attributes in the video tags which are height and width which are used to display the area where the video is going to be played.

For more information, you can refer to the Mozilla docs.

Audio tag

Video tag