In this brief article, we are going to discuss how we can insert media i.e audio or video in our web pages using the tags audio and video.

Links

Syntax -> <a >...</a>

The attributes of the anchor tag:

1. <a href="https://google.com/">Google</a>
   href gives the link to the webpage. There are 2 kinds of URLs (i) Absolute a link to a web address, (ii) Relative a link to the page within the webpage

2. <a href=" default.asp"><img src="smiley.gif"></a>
   IMG as a link.

3. <a href="mailto:someone@example.com">Send email</a>
   mailto opens the user's mail account and tries to mail to the link provided.

4. <a href="https://google.com/" target="_blank">Google</a>
   target targets where to open the link as. It has multiple types :

   • _self - Default. Opens the document in the same window/tab as it was clicked

   • _blank - Opens the document in a new window or tab

   • _parent - Opens the document in the parent frame (overrides the parent view)

   • _top - Opens the document in the full body of the window (overrides the full view

Audio

The audio tag inserts audio content on the web page. It has a src attribute that contains the path to your audio file. Instead of src attribute, we can also use the <source> tag inside the <audio></audio> element.

We can add more than one audio source using the source tag. The browser will choose the first source if it's supported.

<audio controls>
    <source src="./media/audio.ogg" type="audio/ogg">
    <source src="./media/audio.mp3" type="audio/mpeg">
    The browser does not support the audio tag.
</audio>

<!-- Without source tag -->
<audio controls src="./audio.mp3">
    The browser does not support the audio tag.
</audio>

The text between the <audio></audio> tags are displayed on the web page only if the audio element is not supported by the browser.

The audio element supports mp3, wav and ogg audio formats

Video

The video tag inserts a media player which can play a video file on the web page. Similar to the audio element, we can use either the src attribute or <source> tag inside the <video></video> tags.

And we can add more than one video source using the source tag.

COPY

COPY

<video width="420" height="320" controls>
   <source src="./media/video.mp4" type="video/mp4">
   <source src="./media/video.ogg" type="video/ogg">
   The browser does not support the video tag.
</video>

Like the audio tag, the text between the <video></video> tags is displayed only if the browser doesn't support the video tag.

The video element supports the formats mp4, WEBM, and ogg .

Attributes

We can add several other features to the audio and video players like autoplay or loop by adding attributes to the audio and video tag. Some of the attributes are below.

Controls

The controls attribute is used in the above examples. This attribute shows controls that allow the user to play/pause the audio or video, increase/decrease the volume, etc.

Autoplay

When autoplay attribute is set in the audio or video tag, it will play the file as soon as it is ready automatically.

Width & Height

The width and height attributes define the width and height of the frame in which the video will be played if they are set in the video element. It takes value in pixels. It doesn't take a percentage as value.

Ex. <video width="420" height="320">

Controlslist

The browser provides some specific controls to the player when the attribute control is used. The controlslist attribute is used when we want to select what controls we want to show when we use the controls attribute.

The values for the controlslist attribute are nodownload, nofullscreen and noremoteplayback .

Loop

The loop attribute, when used in audio or video tags, allows the browser to play the audio or video file again and again on a loop automatically.

Muted

This attribute specifies if the audio or video will be muted when the web page is loaded. The default value of this attribute is false.

That's it for this article. Thanks for reading!