In this article, we are going to learn about audio and video tags, how these tags are used in HTML pages, and how these tags work. I hope you must learn something new from this article, so let's start.
Audio Tag
HTML audio tag is used to define sounds such as music and other audio clips. Currently, there are three supported file formats for HTML 5 audio tags.
MP3
WAV
OGG
The audio tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
<audio controls>
<source src="nature.ogg" type="audio/ogg">
<source src="nature.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Audio Tag Attributes
Some attributes are used along with the audio tag.
Controls
It defines the audio controls which is displayed with play/pause buttons.
Muted
It is used to mute the audio output.
Loop
It specifies that the audio file will start over again, whenever it is completed.
Autoplay
It specifies that the audio will start playing as soon as it is ready.
Preload
It specifies the author's view to upload an audio file when the page loads.
SRC
It specifies the source URL of the audio file.
<audio controls autoplay loop>
<source src="nature.ogg" type="audio/ogg">
<source src="nature.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Video Tag
HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files such as movie clips, and song clips on the web page.
The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports.
Currently, there are three video formats supported for HTML video tag
MP4
WebM
OGG
The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Video Tag Attributes
Some attributes are used along with the audio tag.
Autoplay
It specifies that the video will start playing as soon as it is ready.
Controls
Specifies that video controls should be displayed such as a play/pause button etc.
Height
It is used to set the height of the video player.
Width
It is used to set the width of the video player.
Loop
It specifies that the video file will start over again, whenever it is completed.
Muted
It is used to mute the video output.
Poster
It specifies the image which is displayed on the screen when the video is not played.
SRC
It specifies the source URL of the video file.
<video width="320" height="240" poster="/Audio and Video Tag in HTML.png" controls muted loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Summary
I think I have covered lots of information about audio and video tag. I hope your learned something new from my article. If you found something informative in this article please give your precious comment on it.