Video Tag and Audio Tag in HTML

HTML <video> Tag

As the name suggests, the <video> tag is used to display video files onto the browser. You can display that farewell video you have created on your website using this tag. There's a limitation for the file types of video for you to show on the website. You can only use .mp4, .webm, and .ogg file types. Other than this, formats will not get displayed on the webpage.

Now, simply placing these tags in HTML text does not guarantee that your video will be displayed. The path to your video must be specified. You can do that using the <source> tag.

Syntax

Above is the syntax of the <video> tag. As you can see, we have provided the path of our mp4 file using the 'src' attribute. This will show your video on your website.

Now just like this, there are many attributes available for the <video> tag, which allows you to do almost anything for your video. Let's see the attributes.

Attributes

Attributes in HTML tags are used to add some custom functionality to our tags. It is used to give extra information about your tags such as controls, width, height, etc. We have seen above that just providing a <video> tag is not sufficient. You have to write the attribute 'src' along with the <source> tag and pass the video's path for the video to get displayed. Below is a list of attributes that you can use inside the <video> tag.

1. Width and Height - Height and Width attributes are used to specify the height and width of the video's size in HTML. Generally, each video has a particular size, like 16×9(Vertical view) or 9×16(Horizontal view). In the same way, you may choose the width and height of your video's resolution.

Example

Output

I hope you can understand how the size of the video got changed. The unit of the values you pass in these attributes is always pixels. The greater the value, the greater the size will be.

2. controls This attribute allows us to show various controls like play, pause, volume adjustments, full-screen icon, and 3 dots which even allows you to download the video file over your video. You just have to write controls as an attribute.

Example

Output

On the output, you can now see the controls like the play and pause buttons, audio buttons, full-screen buttons, etc.

3. poster Whenever a video is getting displayed on the screen, it takes some time to download and then display. If the file size is large and the connectivity is low, you might see the loading icon. Instead, you can use the poster attribute to add an image over the video, which gets disappear after the video gets fully loaded.

Example

Output

Notice that the image is getting displayed instead of that loading icon. The image will be there until and unless you play the video.

4. muted Suppose that your video has some music, and you don't want it to get played initially when the video plays. You can use this attribute to do that. Let's see the example.

Output

When you play the video, you will not hear any sound because the video will be muted.

5. autoplay What this attribute will do is it will automatically play the video as soon as the video is downloaded fully. Users will not have to press the play button because the video will get started on its own. The only limitation here is you have to use the "muted" attribute along with the "autoplay" attribute.

Output

Now, as you can see, the video is getting played automatically.

6. loop

The loop attribute allows us to repeat a particular video an infinite number of times. As soon as the video ends, it will start all over again. Let's see the example.

Output

Play the video till the end, and you will see the video will resume playing from the start.

7. preload This attribute allows you to ask the user how they would like your video to get loaded once the page loads. It has basically three values - auto, metadata, and none.

• auto value will load the entire video when the page loads.
• metadata value will load only the metadata of the video when the page loads.
• none value will not load the video at all when the page loads.

Output

8. Global Attributes

HTML provides some global attributes. As the name says 'global', we can get the hint that these attributes can be used by all the elements of HTML. Below is the list of all the global attributes.

9. Event Attributes

HTML has some global event attributes which get called whenever an event occurs on your browser, like a mouse click, keyup, keydown, mousemove, onload, ondrag etc. Anything you do to interact with the interface of the browser is an event. And the <video> tag supports them all. You can find the whole list of Event Attributes on the Scaler Website.

HTML <audio> Tag

Just like the <video> tag is used to add video files to your website, the <audio> tag is used to add <audio> files to your webpage. HTML5 provides this tag where you can embed music/audio files to your HTML document instead of using any third-party plugins (External Libraries). There are 3 types of files that you can add to the audio tag:

1. .mp3
2. .wav
3. .ogg

Syntax

Above is the syntax to use audio files in HTML documents. Now just writing this is not enough. You have to specify the file path of your audio file in the src attribute. We'll see them in the attributes section. Basically, the <audio> tag is almost the same as the video tag. Even some of the attributes are also the same. Let's see some of those.

Attributes

I hope you now have a better idea of what the attributes are. So, without further ado, let's get started with the first one. -

1. src The 'src' attribute is used to add the audio file to your HTML document. You have to provide the audio file's path here, and then only the audio will get played on the browser.

Example

Even though this adds the audio file to your web page, you won't be able to see it. This is because you will have to add another attribute known as 'controls,' which will provide you the controls like play, pause, and audio buttons, just like the video tag.

Here we have added only one audio file, (.mp3).What if the browser is not supporting this type of audio file? In such cases, you would need to have a backup file that will get played if the first one is not supported. For example, if the .mp3 file is not supported, then I will add another file (let's say .ogg). This file will act as a backup file if .mp3 does not get played.

At this time, you cannot use the src attribute inside the <audio> tag because "src" can have only one file path. We need to add more than the 1 file path. That's why you have to specify a separate tag for that called <source>.

Let's understand using the last example

As you can see, I've used two audio files here. As a result, we must use the <source> tag.

2. controls The next attribute is the controls attribute which is used to display the controls like play, pause, mute, etc., onto the browser. You must provide a control attribute inside the <audio> tag for it to get displayed.

Output

You can see the controls of the audio file as the output.

3. autoplay This attribute is used to play the audio automatically as soon as the page loads or as soon as the audio file gets fully downloaded. But recently, this "autoplay" feature has been disabled for the newest version of Google Chrome. You can run the code on Mozilla, Microsoft Edge, and old Google Chrome. Below is an example

Output

You cannot see the audio autoplay because it has been disabled in Google Chrome. But if you try to run this code on any other browser, you will surely see the audio autoplaying.

4. muted The muted attribute is used to mute the sound of the audio when the page loads. You can see a cross next to the volume bar that indicates that the audio is muted; click on that icon to hear the sound.

Example

Output

From the output, you can see that the audio is disabled. That's because of the muted attribute.

5. loop

This attribute is used to play the audio on a loop. The audio will start playing from the start again once the audio is completed playing till the end. This will go on infinitely.

Example

Output

Play the audio till the end, and you will see the audio starting over again. That's because of the "loop" attribute.

Other ways to add the audio file in your HTML Document.

The <audio> tag is not the only way to add audio files in your browser. There are 3 more ways to do so. Let's see each one of them -

1. Object Element The object element is an HTML tag that was intended to allow us to include various sorts of media on our web pages, such as audio, video, photos, and PDFs. It is not frequently used because it is not supported by the majority of browsers. And the manner in which it is executed is dependent on the type of media we are attaching.

Example

Output

As you can see, we have used an object tag to display an image and video file instead of the <img> and <video> tags.

2. Anchor Tag The anchor tag <a> is used to create a link to your webpage that, when clicked, redirects you to that destination. Given that the anchor tag only requires a path, if we provide the path to our audio file, it will redirect to the audio. Let's see the following example.

This piece of code will create two links - Audio 1 and Audio 2. And if you click one of the links, it will open a new tab for you to play that particular audio file. Following is the output -

Generally, this method is not preferable because the anchor tag creates unnecessary redirection on your website when users want to see content on the same page.

3. Embed Element This tag was built with a single objective in mind: to allow you to embed multimedia assets within your HTML document. As with the object tag, you can include any type of file in this. Let's see the example -

Output

This will embed the audio file inside your webpage.

Browser Support

Let's see the browser support of these two tags so we can understand them tags better.

<video> tag -

<audio> tag -