What are the media element tags introduced by HTML5 ?

Last Updated : 07 Aug, 2024

HTML5 introduced 5 most popular media element tags i.e. <audio>, <video>, <source>, <embed>, <track>. These media element tags changed the entire development using HTML. In this article, you will get to know about these five media element tags briefly.

Media Tags:

Media Tag	Description
<audio>	An inline element is used to embed sound files into a web page.
<video>	Used to embed video files into a web page.
<source>	Used to attach multimedia files like audio, video, and pictures.
<embed>	Used for embedding external applications, generally multimedia content like audio or video, into an HTML document.<
<track>	Specifies text tracks for media components, specifically for audio and video elements.

Advantage of Media tag:

Plugins are no longer required
Speed - anything naturally integrated into a browser will be rendered and executed in a faster fashion than imported third-party
Native (built-in) controls are provided by the browser.
Accessibilities (keyboard, mouse) are built-in automatically

Table of Content

<audio> Tag
<video>
Adding youtube videos
<embed>
<source>
<track>

<audio> Tag:

It is a useful tag if you want to add audio such as songs, or any sound files into your webpage.

Syntax:

<audio>
    <source src="sample.mp3" type="audio/mpeg">
</audio>

Example 1: In this example, we will use <audio> tag with an example.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <p>Audio Sample</p>
    <!--- Autoplay ensure to run audio automatically
              after running the program -->
    <audio controls autoplay>
        <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.ogg"
            type="audio/ogg">
        <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.mp3"
            type="audio/mpeg">
    </audio>
</body>

</html>

Output:

<video>:

It is a standard way to embed a video into your web page.

Syntax:

 <video src="" controls>   </video>

Example 2: In this example, we will see the use of <video>tag.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <p>Video Sample</p>
        <video width="400" height="350" controls preload>
            <source src="myvid.mp4" type="video/mp4">
            <source src="myvid.ogg" type="video/ogg">
        </video>
    </center>
</body>
</html>

Output:

Adding youtube videos:

Youtube videos can also be directly added to your web page using the embed video option on any youtube video. <iframe> element is used to add the video with the src attribute but a shortcut to that is simply to go to any youtube video and right-click on the video, then select the copy embed code option.

Example 3: In this code we will see how to add youtube videos with the help of iframe tag in an HTML document.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>
    <iframe width="942" height="530" 
            src=
"https://www.youtube.com/embed/KWnoiOimNbs"
            title=
"Introduction to Python | Sample Video for Python Foundation Course | GeeksforGeeks" 
            frameborder="0"
            allow=
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen>
    </iframe>
</body>

</html>

Output:

<embed>:

It is used as a container for embedding plug-ins such as flash animations.

Syntax:

<embed attributes>

Example 4: In this example, we will use <embed> tag with an example.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <p>Embed Sample</p>
    <embed src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210723103530/simplescreesdfdsrecorder2021071.gif"
           width="300px" height="300px">
</body>

</html>

Output:

<source>:

As you can observe that <audio>, <video> elements contain the <source> element, the <source> tag is used to attach multimedia files.

Syntax:

<source src="" type="">
   ...
</source>

Example 5: In this example, we will use <source> tag with an example.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>Source Tag</h2>
        <audio controls>
            <source src="audio.mp3" 
                    type="audio/mp3">
        </audio>
    </center>
</body>
</html>

Output:

<track>:

It is used to specify subtitles, caption files, or different files containing text, that ought to be visible once the media is taking part in it.Thus it is a simple sector for the <audio> and <video> elements.

Syntax:

<track Attribute>

Example 6: In this example, we will use <track> tag with an example.