Open In App

Which media format is supported by the browser in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

HTML supports various media elements such as audio or video. It uses media tags such as <audio>, <video>, <source>, <embed> and <track> to include media files in HTML documents. Multimedia files can be in different formats (example- MP3, MP4, WEBM) which can be identified by looking at the extension of these files. Among all the available formats of these files, only some of them are supported by HTML standards.

AUDIO FORMATS:

HTML uses <audio> tag to add sound files in the web page. It contains a <source> tag which specifies the name and format of the audio file. There are many formats for audio files such as MIDI, RealAudio, WMA, WAV, Ogg, MP3, etc. but MP3 is the most efficient format for compressed recorded music. Following audio formats are supported by HTML standards:

  • MP3
  • WAV
  • Ogg

1. MP3: MPEG audio layer-3 (MP3) is basically a data compression format for audio files and represents the audio part of MPEG files. It is the most commonly used format for audio files because of its good compression ability along with high-quality audio. It is used for inserting audio files in web pages or web videos. MP3 files have a .mp3 extension and are supported by all the browsers.

Features:

  • High-quality audio
  • Small file size
  • Compressed data
  • Supported by all browsers

Syntax:

<audio>
   <source src= "filename" type="audio/mpeg">
</audio>

Example: Following code will add an MP3 audio file in HTML document or will display text written between <audio> and </audio> if file is not supported by the browser:

HTML




<!DOCTYPE html>
<html>
  
<body>
  
    <audio controls>
        <source src="demo.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
  
</body>
  
</html>


Output:

2. WAV: Waveform Audio File Format (WAV) is basically an audio format for storing bitstream of uncompressed audio. WAV files have better audio quality but their file size is comparatively larger than MP3 files because of their uncompressed data. It is mostly used for broadcasting CD-quality music files or for web animations. WAV files have a .wav extension and are supported by Google Chrome, Firefox, Opera, and Safari browsers.

Features:

  • High-quality audio
  • Large file size
  • Uncompressed data
  • Supported by most of the browsers

Syntax:

<audio>
   <source src= "filename" type="audio/wav">
</audio>

Example: Following code will add an WAV audio file in HTML document or will display text written between <audio> and </audio> if file is not supported by the browser:

HTML




<!DOCTYPE html>
<html>
  
<body>
  
    <audio controls>
        <source src="demo.wav" type="audio/wav">
        Your browser does not support the audio element.
    </audio>
  
</body>
  
</html>


Output:

3. Ogg: Ogg is basically an audiovisual file format for storing compressed data along with metadata about the file in an open container. It has the better audio quality and a comparatively smaller file size than MP3. Its compression bit rate can vary with file requirements. It is used for streaming and manipulating high-quality digital multimedia data. Ogg files have a .ogg extension and are supported by Google Chrome, Firefox, and Opera browsers.

Features:

  • Good audio quality
  • Small file size
  • Compressed data along with metadata of the file
  • Supported by Google Chrome, Firefox, and Opera

Syntax:

<audio>
   <source src= "filename" type="audio/ogg">
</audio>

Example: Following code will add an Ogg audio file in HTML document or will display text written between <audio> and </audio> if file is not supported by the browser:

HTML




<!DOCTYPE html>
<html>
  
<body>
  
    <audio controls>
        <source src="demo.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>
  
</body>
  
</html>


Output:

VIDEO FORMATS:

HTML uses <video> tag to add video files in the web page. It contains <source> tag which specifies the name and format of the video file. There are many formats for video files such as MPEG, RealVideo, Flash, WebM, Ogg, MP4, etc. Following video formats are supported by HTML standards:

  • MP4
  • WebM
  • Ogg

1. MP4: MPEG-4 (MP4) is basically a digital multimedia container format to store compressed data such as audio, video, and still images. It is Youtube’s recommended format for video files because of its good compression ability along with high-quality data. It is commonly used in video cameras and TV hardware. MP4 files have a .mp4 extension and are supported by all the browsers.

Features:

  • High-quality video
  • Small file size
  • Compressed data
  • Supported by all browsers

Syntax:

<video>
   <source src= "filename" type="video/mp4">
</video>

Example: Following code will add an MP4 video file in HTML document or will display text written between <video> and </video> if file is not supported by the browser:

HTML




<!DOCTYPE html>
<html>
  
<body>
  
    <video width="320" height="240" controls>
        <source src="demo.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
  
</body>
  
</html>


Output:

2. WebM: Web Methods (WebM) is an audiovisual file format that is used to add audio or video elements in HTML documents. It supports high-quality video and has a file size almost comparable to MP4 files. It can be used for streaming purposes because it is supported even by machines with low technical characteristics. WebM files have a .webm extension and are supported by Google Chrome, Firefox, Opera, and Safari browsers.

Features:

  • Good quality video
  • File size comparable to MP4
  • Supported by all machines even with low technical characteristics
  • Supported by most of the browsers

Syntax:

<video>
   <source src= "filename" type="video/webm">
</video>

Example: Following code will add a WEBM video file in HTML document or will display text written between <video> and </video> if file is not supported by the browser:

HTML




<!DOCTYPE html>
<html>
  
<body>
  
    <video width="320" height="240" controls>
        <source src="demo.webm" type="video/webm">
        Your browser does not support the video tag.
    </video>
  
</body>
  
</html>


Output:

3. Ogg: Ogg is basically an audiovisual file format for storing compressed data along with metadata about the file in an open container. It has better data quality and comparatively smaller file size than MP4. Its compression bit rate can vary with file requirements. It is used for streaming and manipulating high-quality digital multimedia data. Ogg files have a .ogg extension and are supported by Google Chrome, Firefox, and Opera browsers.

Features:

  • Good data quality
  • Small file size
  • Compressed data along with metadata of the file
  • Supported by Google Chrome, Firefox and Opera

Syntax:

<video>
   <source src= "filename" type="video/ogg">
</video>

Example: Following code will add an Ogg video file in HTML document or will display text written between <video> and </video> if file is not supported by the browser:

HTML




<!DOCTYPE html>
<html>
  
<body>
  
    <video width="320" height="240" controls>
        <source src="demo.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>
  
</body>
  
</html>


Output:



Last Updated : 28 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads