How to specify the type of the media resource in HTML5 ?

Last Updated : 06 Jun, 2023

Here, we will see how to set the media type of the media resource using HTML. To select the media type of media resource we use the <source> tag. This tag is used to attach multimedia files like audio, video, and pictures to a web page or website. The <audio>, <video>, and <picture> elements contain the <source> element.

Syntax:

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

Example: In this example, we will specify the media resources by using the <source> tag.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        How to specify the media type
        of the media resource in HTML5?
    </title>
</head>
  
<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to specify the media type
        of the media resource in HTML5?
    </h3>
    <video width="400" height="350" controls>
        <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/output-1.mp4" 
                type="video/mp4">
    </video>
    </br></br>
    <audio controls>
        <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190625153922/frog.mp3" 
                type="audio/mp3">
    </audio>
</body>
</html>

Output:

How to Create Image Hovered Detail using HTML & CSS?

ppatelkap

Improve

Article Tags :

How to specify the type of the media resource in HTML5 ?

Similar Reads

HTML Basic Examples

HTML Structural Examples

HTML Hyperlinks Examples

HTML Table Examples

HTML Form Examples

HTML Frame Examples

HTML Media Based

HTML Questions

Thank You!

What kind of Experience do you want to share?