Introduction
In modern websites, the use of audio and video elements has become increasingly common. To stay relevant in the web development world, it is essential to understand how to incorporate these elements using HTML tags. This article aims to guide readers on adding audio and video to an HTML5 document, providing them with the necessary knowledge to enhance their web development skills.
<audio> tag in HTML5
In HTML, the <audio> tag is used to add audio to our web pages. The audio tag was to HTML way back in the 2010 and 2011 time frame, but before the introduction of the <audio> tag, web plugins like Flash were required to play audio on our web pages. The <audio> tag is an inline element.
Syntax
<audio>
<source src="url" type="audio/audioformat">
</audio>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Audio</title>
</head>
<body>
<audio>
<source src="demo.mp3" type="audio/mpeg">
</audio>
</body>
</html>
In your example, we have included a source element within the audio element, which specifies the location of the audio file ("demo.mp3") and its type ("audio/mpeg"). This is important for the browser to be able to play the audio correctly.
HTML audio formats and their media types
Following are the formats supported by the <audio> tag and their media types.
| Audio Format |
Media Type |
| wav |
audio/wav |
| mp3 |
audio/mpeg |
| ogg |
audio/ogg |
The above are the supported formats of audio tags.
Attributes of <audio> tag in HTML
In <audio> tag, we can use some attributes according to our requirements and use. Following are the attributes of <audio> tag -
- controls - It manages what controls to display on the webpage, like play or pause.
- autoplay - It automatically plays the audio embedded in the web page.
- src - It is used to specify the URL of the audio file.
- loop - It is used to play the audio continuously in a loop.
- muted - It is used to mute the audio file.
Controls in <audio> tag in HTML
The control attribute is used to specify what controls to display in the audio in the browser. In other words, the "controls" attribute in HTML instructs the user agent (browser) to display a default user interface that allows users to control the playback of audio. This interface typically includes options such as play, pause, volume control, and timeline scrubbing, making it easier for users to interact with the audio content on a webpage.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Audio</title>
</head>
<body>
<p> Below is an audio tag example</p>
<audio controls>
<source src="demo.mp3" type="audio/mpeg">
</audio>
</body>
</html>
In the above example, we used an audio tag with its attributes.
Output
![audio tag]()
Autoplay in <audio> tag in HTML
It automatically plays the audio embedded in the web page. In other words, the "autoplay" attribute in HTML instructs the user agent (web browser) to automatically start playing the audio as soon as it is able to, without any interruption. This attribute eliminates the need for manual interaction from the user to initiate playback, enhancing the convenience and immediacy of audio content on web pages.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Audio</title>
</head>
<body>
<p> Below is an example of autoplay</p>
<audio controls autoplay>
<source src="demo.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Output
![audio tag]()
!n the above example, we have included an audio element with the controls and autoplay attributes set. The controls attribute will display the default playback controls for the audio, such as play, pause, and volume controls. The autoplay attribute will start playing the audio automatically when the webpage is loaded.
We have also added a paragraph element to provide some context for the audio element, which is a good practice for accessibility and user experience.
However, it's important to note that auto-playing audio can be disruptive for users, especially those who may be using screen readers or have limited internet bandwidth. It's always a good idea to provide users with control over whether or not they want to play audio by including a play button or some other kind of user interface element that allows them to activate the audio on their own.
Src in <audio> tag in HTML
It is used to specify the URL of the audio file.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Audio</title>
</head>
<body>
<p> Below is an audio tag example</p>
<audio controls>
<source src="demo.mp3" type="audio/mpeg">
</audio>
</body>
</html>
In the above example, we have included an audio element with the controls attribute set. The controls attribute will display the default playback controls for the audio, such as play, pause, and volume controls. We have also added a paragraph element to provide some context for the audio element, which is a good practice for accessibility and user experience.
It's worth noting that in this example, the audio will not start playing automatically when the webpage is loaded. This can be a good thing, as auto-playing audio can be disruptive for users.
Loop in <audio> tag in HTML
It is used to play the audio continuously in a loop. In other words, this instruction tells the user agent (web browser) to automatically seek back to the beginning of the audio when it reaches the end. It enables the audio to play continuously in a loop without requiring manual intervention to replay it.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Audio</title>
</head>
<body>
<p> Below is an example of loop attribute</p>
<audio controls loop>
<source src="demo.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Muted in <audio> tag in HTML
It is used to mute the audio file on the web page. In other words, the "muted" attribute in HTML is used to indicate whether the audio channel should be muted by default. It can override the user's preferences, ensuring that the audio plays without sound unless the user explicitly unmutes it.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Audio</title>
</head>
<body>
<p> Below is example of muted attribute in audio tag</p>
<audio controls muted>
<source src="demo.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Supported Browsers for <audio> tag
Following are the supported browsers for the audio tag.
| Browsers |
mp3 |
wav |
ogg |
| Chrome |
Yes |
Yes |
Yes |
| Firefox |
Yes |
Yes |
Yes |
| Edge |
Yes |
Yes |
Yes |
| Opera |
Yes |
Yes |
Yes |
| Safari |
Yes |
Yes |
No |
Often, support for a specific format of audio or video comes down to patents and legal rights to use the codecs. When chosing a format you should consider file size, quality and of course broad client support. This table can help with the support capabilities.
<video> tag in HTML
HTML <video> tag is used to add a video to our web pages. Like the audio element, the HTML video tag was added around 2010-2011. Before the introduction of the <video> tag, web plugins like Adobe Flash Player were required to play videos on our web pages.
Syntax
<video>
<source src="url" type="video/videoformat">
</video>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Video</title>
</head>
<body>
<p> Below is an Video tag example</p>
<video width="420" height="320" >
<source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>
Output
![video tag]()
HTML video formats and their media types
Following are the formats supported by the <video> tag and their media types.
| Video Format |
Media Type |
| mp4 |
video/mp4 |
| Webm |
video/webm |
| ogg |
video/ogg |
The above are the formats supported by video tags.
Attributes of <video> tag in HTML
In <video> tag, we can use some attributes according to our requirements and use. Following are the attributes of <video> tag -
- controls - It manages what controls to display on the webpage, like play or pause.
- height - It is used to set the height of the video player.
- width - It is used to set the width of the video player.
- autoplay - It automatically plays the video embedded in the web page.
- src - It is used to specify the URL of the video file.
- loop - It is used to play the video continuously in a loop.
- muted - It is used to mute the video file.
- poster - It is used to set a thumbnail for the video to be played before the video gets downloaded.
Controls in <video> tag in HTML
The control attribute is used to specify what controls to display in the video player. In other words, the "controls" attribute in HTML instructs the user agent (browser) to display a default user interface that allows users to control the playback of a video. This interface typically includes options such as play, pause, volume control, and timeline scrubbing, making it easier for users to interact with the video content on a webpage.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Video</title>
</head>
<body>
<p> Below is an Video tag example</p>
<video controls >
<source src="images/Pexels Videos 1093662.mp4" type="video/mp4">
</video>
</body>
</html>
Output
![video tag]()
Autoplay in <video> tag in HTML
It automatically plays the video embedded in the web page. In other words, the "autoplay" attribute in HTML instructs the user agent (web browser) to automatically start playing the video as soon as it is able to, without any interruption. This attribute eliminates the need for manual interaction from the user to initiate playback, enhancing the convenience and immediacy of video content on web pages. It is generally recommended to avoid autoplay as it degrades the user experience.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Video</title>
</head>
<body>
<p> Below is an Video tag example</p>
<video controls autoplay >
<source src="images/Pexels Videos 1093662.mp4" type="video/mp4">
</video>
</body>
</html>>
Output
![video tag]()
Src in <video> tag in HTML
It is used to specify the URL of the video file.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Video</title>
</head>
<body>
<p> Below is an Video tag example</p>
<video controls autoplay height="400px" >
<source src="images/Pexels Videos 1093662.mp4" type="video/mp4">
</video>
</body>
</htm
Loop in <video> tag in HTML
It is used to play the video in the player continuously in a loop. In other words, this instruction tells the user agent (web browser) to automatically seek back to the beginning of the video when it reaches the end. It enables the video to play continuously in a loop without requiring manual intervention to replay it.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Video</title>
</head>
<body>
<p> Below is an Video tag example</p>
<video controls autoplay loop height="400px" >
<source src="images/Pexels Videos 1093662.mp4" type="video/mp4">
</video>
</body>
</htm
Muted in <audio> tag in HTML
It is used to mute the audio file on the web page. In other words, the "muted" attribute in HTML is used to indicate whether the audio channel of a video should be muted by default. It can override the user's preferences, ensuring that the video plays without sound unless the user explicitly unmutes it.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Video</title>
</head>
<body>
<p> Below is an Video tag example</p>
<video controls autoplay muted height="400px" >
<source src="images/Pexels Videos 1093662.mp4" type="video/mp4">
</video>
</body>
</htm
Supported Browsers for <video> tag
Following are the supported browsers for video tags.
| Browsers |
mp4 |
webm |
ogg |
| Chrome |
Yes |
Yes |
Yes |
| Firefox |
Yes |
Yes |
Yes |
| Edge |
Yes |
Yes |
Yes |
| Opera |
Yes |
Yes |
No |
| Safari |
Yes |
Yes |
Yes |
Again support for video types often comes down to legal aspects. So always consider broad client support before serving your video in a specific format.
Conclusion
In this article, we have learned to use the <audio> and <video> tags in HTML5 with their different attributes and different properties. We also have used it with code examples. Further, we have learned which browser supports them.