Audio & video Tags in HTML

GoudhamGoudham
2 min read

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>
0
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