Skip to content
Related Articles

Related Articles

Improve Article
How to define the type of media resource in HTML5 ?
  • Last Updated : 17 Mar, 2021

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 exampl 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




My Personal Notes arrow_drop_up
Recommended Articles
Page :