Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Commonly used Video formats while using HTML5 video
The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.
HTML5 <video> tag is a fantastic addition. Instead of relying on a plugin like Flash, it makes it possible to playback video natively in all of the most recent browsers. It makes web video accessible to hardware that doesn't support Flash. Additionally, it makes codecs playable on the web that weren't before.
Let’s jump into the article to discuss more about commonly used video formats while using HTML5 video.
What Are Web Formats?
There are three different video formats that some browsers can play natively. Unfortunately, no format is supported by every browser, thus if you want useful HTML5 video support, you must implement at least two different formats. You must need MP4 + H.264 a minimum, together with AAC or MP3. In Safari, Chrome, and IE9 (Vista/Windows 7), MP4 video plays natively.
For further browsers, use WebM + VP8 or Ogg + Theora with Vorbis audio. Ogg is compatible with Firefox (3.5+), Chrome (3+), and Opera (10.54+), while WebM is compatible with Firefox (4+), Chrome (6+ or Chromium), and Opera (10.60+).
Let’s look into the browser support for different video formats −
Browser |
MP4 |
WebM |
Ogg |
|---|---|---|---|
| Chrome | YES |
YES |
YES |
| Safari | YES |
YES |
NO |
| Firefox | YES |
YES |
YES |
| Opera | YES |
YES |
YES |
How to use HTML5 video formats
There was no established framework for displaying video on your website until the emergence of HTML 5. You have the option to introduce the video element to your browser using HTML5 video. By replacing some of the object's components, it increases the viewer's attention and excitement. With the development of this new technology, it will be possible to display videos online without the usage of any plug-ins.
Below is the table of HTML video with their media type.
File format |
Media type |
|---|---|
| MP4 | Video/mp4 |
| WebM | Video/webm |
| Ogg | Video/ogg |
For getting clear idea on commonly used video formats while using HTML5 video. Let’s look into the following examples.
Example
In the following example we are playing the Ogg video format.
<!DOCTYPE html>
<html>
<body>
<h1>Using Ogg format</h1>
<video width="320" height="240" autoplay>
<source src="https://file-examples.com/storage/fe8c7eef0c6364f6c9504cc/2018/04/file_example_OGG_480_1_7mg.ogg" type="video/ogg">
</video>
</body>
</html>
Output
When the script gets executed, it will generate an output consisting of a video uploaded on the webpage, which is in Ogg format and has the autoplay attribute, which causes the video to start automatically when the page loads.
Example
Considering the following example, we are using the MP4 format.
<!DOCTYPE html>
<html>
<body>
<h1>Using MP4 format</h1>
<video width="320" height="240" autoplay>
<source src="https://static.videezy.com/system/resources/previews/000/055/884/original/201118-CountdownChristmas.mp4" type="video/mp4">
</video>
</body>
</html>
Output
On running the above script, it will generate an output consisting of a video uploaded to the webpage in MP4 format that has the autoplay attribute, which causes the video to start automatically when the page loads.
Example
Look into the following example, where we are using multiple source elements and browser will use the first recognized format −
This case is helpful if any of the format gets failed to load the other will work as a backup.
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type = "video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the video element.
</video>
</body>
</html>
Output
When the script gets executed, it will generate an output consisting of video displayed in MP4 format on the webpage, leaving the Ogg format video behind because the browser recognizes the MP4 format first.
259 Views
