Audio & video Tags in HTML
Audio
the <audio> is an HTML element to embed audio content into documents, it may contain one or more audio sources represented using the src attribute or source tag, and the browser will choose the suitable one
It supports .mp3, .wav and .ogg format files, as soon as the audio source is coded, an audio file is not available to play we need to add important attribute controls which will provide controls like play, pause and audio buttons
with the src attribute, we can insert only one audio file to have multiple audios as browser does not support every format we can code like:
<audio controls>
<source src="file1.mp3">
<source src="file1.0gg">
</audio>
along with global attributes audio, the tag supports the below extra attributes
Autoplay
autoplay attribute is of type boolean when it is set, it begins playback as soon it can without waiting for the entire audio to finish downloading
Muted
It is of the boolean type that indicates initially audio will be silenced, the default value is False
Loop
The boolean attribute indicates audio player will seek back to start upon completing the audio, audio keeps on playing for infinite times
controlsList
to disable the download option for audio we can use parameter controlList and specify "nodownload", allowed values are nodownload
, nofullscreen
and noremoteplayback
Video
<video> is an HTML element to embed video into documents, we can provide height and width to fit into a webpage
along with global attributes, it also supports attributes like autoplay, muted, controls, loop and controlsList
other methods to embed audio and video
Object , Embed
<object> and <embed>is an HTML element that represents external resources which can be treated as images, audio, video and another object to insert into the documents
<object data="Namma-Satham.mp3" type="audio/mp3" muted></object>
<embed src="Lions Roaring Compilation.mp4" type="video/mp4">
<a href="Lions Roaring Compilation.mp4" target="_blank">Lion roaring</a>
Subscribe to my newsletter
Read articles from Goudham directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Goudham
Goudham
I am a senior consultant