Audio Tag
Video Tag
Audio Tag
The Audio Tag is used to embed sound content into a document, such as music or other audio streams. Currently, There are three supported file formats for the HTML5 audio tag.
mp3
wav
ogg
Before HTML5, audio cannot be added to web pages in the Internet Explorer era. To play audio, we used web plugins like Flash. After the release of HTML5, it is possible. This tag supports Chrome, Firefox, Safari, Opera, and Edge in three audio formats – MP3, WAV and OGG. Only Safari browser doesn’t support OGG audio format.
Syntax:
<audio>
<source src="file_name" type="audio_file_type">
</audio>
Attributes of <audio> tag:
autoplay - When the page is loaded. It specifies playing audio as soon as possible.
controls - It displays audio control.
loop - It will start the audio again when it is finished.
muted - When the page is loaded audio will be automatically muted.
preload - audio will be loaded when the page is ready.
src - It specifies the URL of the audio file.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio</title>
</head>
<body>
<h1>Audio Tag</h1>
<audio controls autoplay>
<source src="horse.mp3">
</audio>
</body>
</html>
Video Tag
The video Tag is used to embed video content into a document, such as a video or other video streams. To embed video in HTML, we use the <video> tag. It contains one or more video sources at a time using <source> tag. It supports MP4, WebM, and Ogg in all modern browsers. Only Ogg video format doesn’t support in Safari browser.
Syntax
<video>
<source src="file_name" type="video_file_type">
</video>
Attributes of <video> tag:
autoplay - When the page is loaded. It specifies playing videos as soon as possible.
controls - It displays video control such as play, pause, and stop.
loop - It will start the video again when it is finished.
muted - When the page is loaded video will be automatically muted.
src - It specifies the URL of the audio file.
preload - It specifies how the author thinks the video will be loaded when the page is ready.
poster - It specifies an image will be shown until the video play.
width - It specifies the width of the video area. The default value of width is ‘auto’.
height - It specifies the height of the video area. The default value of height is ‘auto’.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video</title>
</head>
<body>
<h1>Video Tag</h1>
<video width="320" height="240" controls>
<source src="movie.mp4">
</video>
</body>
</html>