# HTML Audio and Video Tags

Hey there coders!

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`.

## 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.

```xml
<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 is 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.

```xml
<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!