If you are a web designer or a web developer, the first thing that comes in your mind is how can you design your website more attractive for your website visitor.

For designing your website more attractive you can add videos on your website.

According to AYTM Market Research “ More than 90 percent of consumer access video content on the website

Consumers can use devices like desktop, laptop, computer and mobile to access the website but we can suggest our friends and clients get their mobile website designed also because half of the website visitors ( 47.5%)  use mobile.

C:\Users\kcas\Downloads\StatCounter-comparison-ww-monthly-201805-201905.png

 Now the question is which HTML5 video formats are more compatible for different types of browsers?

The most popular browser is Chrome, Firefox, Safari, Internet Explorer and Edge. This below-given chart represents the statistics according to the use of this popular browser 

C:\Users\kcas\Downloads\StatCounter-browser-ww-monthly-201805-201905.png

HTML5 video Formats are used by web designers to add videos elements on the web. The HTML5 Working Group considered it desirable to specify at least one video format which all browsers should support. The ideal format in this regard would: 

  • Have good compression, good image quality, and low decode processor use.
  • Be royalty-free.

How HTML5 video format works :

The controls attribute add video controls like lay, pause, and volume.

It is good to include width and height attributes.

The source element allows specifying alternative video files which browser may choose from.

The text between the <video > and </video > tags will only be displayed in browsers that do not support the  <video> element .

HTML video tag

Tag Description
<video> Define a video or movie
<source> Defines multiple media resources for media elements, such as <video > and <audio> 
<track> Define text tracks in media players

Attributes

Autoplay; A Boolean attribute, the video automatically begins to playback as soon as if can do so without stopping to finish loading the data.

Preload: This attribute Hint the browser about whether optimistic downloading of the video itself. 

Currently, there are 3 supported video formats for the video elements  MP4, OGG, WebM.

OGG format is an open container format designed to provide efficient streaming and manipulation of high-quality digital multimedia.

The MP4 format is used to store audio and video, it can be used to store other data like a subtitle. It also allows streaming over the internet.

WebM format also contains audio, video and text and allows streaming also.

Browser Support

The below-given table shows which video formats are likely to be supported by a given browser.

Internet Explorer and safari support only MP4 video format, chrome, Opera and Firefox support MP4, WebM and Ogg format, 

Browser MP4 WebM Ogg
Internet Explorer Yes No No
Chrome Yes Yes Yes
Firefox Yes(from Firefox 21 From Firefox 30 for Linux) Yes Yes
Safari Yes No No
Opera Yes( from opera 25) Yes Yes

Conclusion: MP4 format is more compatible as compared to other formats, it supports all popular browsers so as a web designer we can prefer this for adding videos

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: