Audio and video tag
Table of contents
Audio Tag:
The
<audio>
tag is used to embed audio content, such as music or sound effects, into web pages.The
src
attribute specifies the URL or file path of the audio file you want to embed.Example:
<audio src="audiofile.mp3"></audio>
You can specify the MIME type of the audio file using the
type
attribute to assist browsers in understanding the file format.Example:
<audio src="audiofile.mp3" type="audio/mpeg"></audio>
The
<audio>
tag supports various audio formats like MP3, WAV, and OGG.To provide compatibility across different browsers, you can include multiple
<source>
tags within the<audio>
tag, each specifying a different audio format.Example:
<audio> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> Your browser does not support the audio tag. </audio>
The
controls
attribute adds playback controls (play, pause, volume) to the audio player.Example:
<audio src="audiofile.mp3" controls></audio>
Video Tag:
The
<video>
tag is used to embed video content, such as movies or video clips, into web pages.The
src
attribute specifies the URL or file path of the video file you want to embed.Example:
<video src="videofile.mp4"></video>
Just like with the audio tag, you can specify the MIME type of the video file using the
type
attribute.Multiple video formats can be supported by including
<source>
tags within the<video>
tag, each specifying a different video format.Example:
<video> <source src="videofile.mp4" type="video/mp4"> <source src="videofile.webm" type="video/webm"> Your browser does not support the video tag. </video>
The
controls
attribute adds playback controls (play, pause, volume, progress) to the video player.Example:
<video src="videofile.mp4" controls></video>
The
autoplay
attribute automatically starts playing the video as soon as the page loads.Example:
<video src="videofile.mp4" autoplay></video>
The
loop
the attribute causes the video to loop and play again from the beginning after it finishes.Example:
<video src="videofile.mp4" loop></video>
The
poster
attribute specifies an image to be displayed as a placeholder before the video loads or is played.Example:
<video src="videofile.mp4" poster="thumbnail.jpg"></video>
It's important to ensure compatibility across browsers by providing alternative formats using the <source>
tag and using appropriate attributes to control the behavior and appearance of the audio and video players.
I hope this comprehensive explanation helps clarify the usage and features of the audio and video tags in HTML.
Subscribe to my newsletter
Read articles from Ankit Dixit directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Ankit Dixit
Ankit Dixit
student |web developer |UI/UX designer |logo designer