Audio and Video Tag in HTML

Audio Tag

<audio> tag is new in the HTML file used to attach an audio file to the website. When we want to add music to the webpage we can use audio tag. There are three supported file formats for the audio tag: MP3, Wav, and Ogg. Let's see the browser compatibility of all these formats

the most supported format is MP3. We can write the audio tag using two methods

 <audio controls>
        <source type="audio/mp3" src="./Sun Zara from Cirkus Mp3 Song Download Pagalfree.mp3">
    </audio>

 <audio src="./Sun Zara from Cirkus Mp3 Song Download Pagalfree.mp3" controls>
    </audio>

The result will be the same as given below

Audio tags attributes

Most commonly used attributes of an audio tag are muted, autoplay and loop.

In a loop, the music will play again and again automatically.

In autoplay whenever the webpage opens or reloads music will be automatically played.

In muted music is by default muted and we can open it if we want.

 <audio controls autoplay>
        <source src="./Sun Zara from Cirkus Mp3 Song Download Pagalfree.mp3" type="audio/mp3">
    </audio>
    <audio controls muted>
        <source src="./Sun Zara from Cirkus Mp3 Song Download Pagalfree.mp3" type="audio/mp3">
    </audio>
    <audio controls loop>
        <source src="./Sun Zara from Cirkus Mp3 Song Download Pagalfree.mp3" type="audio/mp3">
    </audio>

the result will be displayed as follows

Video Tag

video tag is just like audio tag in HTML having same properties of loop, muted, autoplay but some extra properties like width, height and poster. We will not talk about the properties which we have discussed in the audio tag.

  <video controls>
        <source src="./Is being a teacher worth it - Thoughts.mp4" type="video/mp4" >
    </video>

It will display the result like this

Width attribute

We can specify the width of our video on the webpage using the width attribute

 <video controls width="400px">
        <source src="./Is being a teacher worth it - Thoughts.mp4" type="video/mp4" >
    </video>

It will display the following result

Height attribute

We can also define the height attribute.

  <video controls width="400px" height="100px">
        <source src="./Is being a teacher worth it - Thoughts.mp4" type="video/mp4" >
    </video>

It displays the following result

Poster attribute

If we want to give a thumbnail to our video like on youtube we have seen we can define the poster attribute and set can set the image to our video.

 <video controls width="400px" poster="./hitesh.jfif">
        <source src="./Is being a teacher worth it - Thoughts.mp4" type="video/mp4" >
    </video>

It displays the result like this