<Audio> and <Video> Tag in HTML

Vishal GuptaVishal Gupta
2 min read

Table of contents

Audio tag

Definition and Usage:

The <audio> tag is used to embed sound content in a document, such as music or other audio streams.

The <audio> tag contains one or more tags with different audio sources. The browser will choose the first source it supports.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

There are three supported audio formats in HTML: MP3, WAV, and OGG.

Audio Format and Browser Support

BrowserMP3WAVOGG
Edge / IEYESYES*YES*
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

Example

Play a sound file:

<!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 Tag</title>
</head>
<body>
    <h1>The audio element </h1>
    <p>Click on the play button to play a sound</p>
    <audio controls>
         <source src="Scam 1992 Ringtone.mp3"
        type="audio/mpeg">
    </audio>
</body>
</html>

Video Tag

Definition and Usage

The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.

The <video> tag contains one or more tags with different video sources. The browser will choose the first source it supports.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

There are three supported video formats in HTML: MP4, WebM, and OGG.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

ElementChromeEdgeMozilla firefoxOpera mini
<video>4.09.03.511.5

Example

Play a video:

<!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 tag</title>
</head>
<body>
    <h1>The Video element</h1>
    <video width="250" height="240" controls>
        <source src="pexels-sunsetoned-5987145.mp4"
        type="video/mp4">
        </video>
</body>
</html>
0
Subscribe to my newsletter

Read articles from Vishal Gupta directly inside your inbox. Subscribe to the newsletter, and don't miss out.

audiovideoaudio video tagHTML5tags

Written by

Vishal Gupta
Vishal Gupta

I am learning frontend developer.