Open In App

How to define the type of media resource in HTML5 ?

Improve
Improve
Like Article
Like
Save
Share
Report

We can define or specify the type of media file (audio, video, etc) in HTML by the <source> tag. It defines the multimedia resources and gives the browser multiple and alternative types of that media file from which the browser can choose according to its compatibility with that media type.

Note: Browser chooses the first media type that it supports from the given types.

Syntax:

<source src="<media_file>.<media_file_extension>" type="<media_type>">

Example:

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>Defining media types</title>
  </head>
  <body>
    <h2>Welcome To GeeksforGeeks</h2>
 
    <audio controls>
      <source src="sound.wav" type="audio/ogg" />
      <source src="sound.mp3" type="audio/mpeg" />
    </audio>
  </body>
</html>


Output:

sound.wav

In this example two source tags are included for two types of an audio file, i.e. wavand ‘mp3. If the browser supports wav audio files, it will play the audio from that source only, if not it will check for the next given option which is the mp3 audio type. 

If none of the audio types is compatible with the browser, no audio source is selected. Otherwise, the first audio type in the order will get selected as the audio source.  And, the type is the attribute that defines the resource type.

Example:

HTML




<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <h1 style="color: green">
     GeeksforGeeks
    </h1>
 
    <picture>
      <source srcset="gfg.png" />
      <source srcset="gfg.jpg" />
      <img src="gfg.jpg" />
    </picture>
  </body>
</html>


Output:

gfg.png



Last Updated : 23 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads