In this article, we will see what are the different video formats that are supported by the browser, along with understanding their implementation.
Browsers support text in different colors with different fonts and along with supporting various media which includes images, music, videos, animations, etc. A video exists in different formats such as MP4, MPEG, WebM, Ogg, AVI, QuickTime, etc. But HTML supports only 3 types of video formats, which include MP4, Ogg, and WebM.
We will explore all those types of video formats that are supported by the browsers in detail.
<video>: The <video> element in HTML is used to show a video on a webpage.
Syntax:
<video controls="controls">
<source src="filename"
type="type_of_file">
</video>Properties Values:
- Width: It specifies the width of the video display.
- height: It specifies the height of the display video.
- controls: It provides controls for a video like a volume, pause, full display, etc.
- autoplay: It plays the loaded video automatically.
- muted: By default, it mutes the video. So to unmute, use the controls option.
- src: It accepts videos of formats such as .mp4, .ogg, .WebM
- type: Based on the type of file specified in src, we need to specify the type of file. The supported types are video/mp4, video/Ogg, and video/WebM.
Supported Video Formats:
- MP4 Video Format: The MP4 video format is developed by the Moving Pictures Expert Group. The other name for MP4 video format is MPEG-4. It is supported by all browsers and used in video cameras and TV Hardware. It is highly recommended by YouTube. The extension for this video format is .mp4. Let’s look into the syntax to load the .mp4 video into a webpage.
- Ogg Video Format: The Ogg video format is developed by Xiph.Org Foundation. It is also called Theora Ogg and an extension of this type of video format is .ogg. Let’s look into the syntax to load the .ogg video into a webpage.
- WebM Video Format: The WebM video format is developed by different browsers- Opera, Mozilla, and top companies like Google and Adobe. The extension of this type of video format is .webm. Let’s look into the syntax to load the .webm video into a webpage.
Example 1: This example describes the various video formats supported by the browser. Here, we have used the .mp4 video format with the <video> element having a control option to play and pause the video.
<!DOCTYPE html> <html>
<head>
<title>
Various video formats supported by the Browser
</title>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>MP4 video in webpage</h3>
<video width="500" height="200" controls>
<source src="gfg.mp4" type="video/mp4">
</video>
</center>
</body>
</html>
|
Output:
Example 2: In the below example, we uploaded a .ogg formatted video file which will be auto-played and muted, by default, into a webpage using <video> element. So, the video in the webpage won’t contain controls to play/pause and audio as muted property is set in <video> element.
<!DOCTYPE html> <html>
<head>
<title>
Various video formats supported by the Browser
</title>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>OGG video in webpage</h3>
<video width="400" height="250" autoplay muted>
<source src="gfg.ogg" type="video/ogg">
</video>
</center>
</body>
</html>
|
Output
Example 3: In this example, we have inserted a video into a webpage of the type WebM and should be played on mute, by default, but the user can unmute it if they want. This can be achieved by passing controls, and muted properties to the <video> element.
<!DOCTYPE html> <html>
<head>
<title>
Various video formats supported by the Browser
</title>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>WebM video in webpage</h3>
<video width="200" height="180" controls muted>
<source src="river_video.webm" type="video/webm">
</video>
</center>
</body>
</html>
|
Output