Adding Webm video format on your site tutorial

What is Webm ?

Webm can be said to be Media format for Web or Internet.Google has come up with Webm for videos and Webp for Images as preferred media formats for Internet.YouTube has also started using Webm as video format on its website.This post will cover

  • General Introduction of Webm
  • Converting your existing video to Webm video
  • Adding Webm video to your website

The post will not describe the technical details behind Webm video format.As these details are not of interest for Bloggers like me.The post is aimed at Bloggers with little or no technical details.There are several advantages of using Webm media format on your website

Webm Advantages

You have heard of HTML5.HTML5 is one of the hottest web technologies and much talked about as well.Major web browsers like Firefox and Chrome support HTML5.HTML5 supports Video tags.Video tags are just like other HTML tags (say for example <p> para tags). Webm videos can be played by browsers like Firefox and Chrome.The only thing you need to do is use video tag.We will see the exact syntax later on.

This helps us reduce amount of resources needed to play video files.Normally video player is required to play video files.But using video players reduces your website load time.Most of the video players if not all loads JavaScript files and CSS files.This increases number of resources and requests.The page size of your web page increases drastically whether it has video or not.

Most of the video players do not have option to load these files only if there is video on that page.So overall performance of your website goes down.This becomes real problematic if your page is viewed on mobile.So using Webm video format helps you reduce your website load time.

HTML5 video tag can also play other video format like mp4 and .ogg.But Firefox does not support mp4 video format.But Webm is supported by most browsers except Internet Explorer.So you would be serving pages faster to most of your viewers.

Converting your Videos to Webm

Now chances are that your videos are not in webm format as of now.This is quite understandable as webm is not very popular media format.With YouTube using webm media format things will change with time.So in order to use Webm on your website you need to convert your existing videos to webm format.

To convert your existing video files to webm files We will be using VLC media player.The reason is that it is open source and completely free.So getting VLC installed on your system is not an issue.Chances are that you already have VLC installed on your system.

To convert your video files to webm format follow below steps

  • Download VLC media player.
  • After downloading install VLC media player.After installing it open VLC media player.
  • Click on Media option.After clicking you can see Convert / Save option as shown in below image.
VLC Media player Convert option
VLC Media player Convert option
  • This will pop up new screen as shown on below image.On this screen you can click the Add button to browse for video files you want to convert.You can also select more than one video file as well.So in case you want to convert many video files in one go then it is also possible.You can also remove video files wrongly selected using the Remove button (after clicking on video you want to remove from the list)
VLC Media player Convert Screen
VLC Media player Convert Screen
  • After selecting the files click on Convert / Save screen of above screen.This will display a new screen as shown below.From the drop down next to Profile select the option Video VP80 + Vorbis (Webm).There are lot of other options mentioned.You can create other video format files from this screen.I convert a video to different format using this screen to check file size of each video format.
VLC Media player Convert Output Screen
VLC Media player Convert Output Screen
  • After selecting the profile you need to select output file name.If you are not selecting output file name then VLC will create the converted output file in VLC folder.So I prefer selecting output file name.
  • After giving the destination file name click on convert/save option to convert the file from existing format to webm format.

I converted mov file to .ogg file, .mp4 file and .webm file.This was performed to check file size of different video formats.The larger the file size the more time to load it will take.So if any format has low file size but retains the video quality then it is desirable.I wanted to check webm on this criteria before using it on my websites.

The file size of .ogg file was smallest followed by webm and mp4.So mp4 has the largest file size of the three.Same mov file was used to generate all the three files using VLC media player converter.I did not dug too deep into the matter.But I went on to use webm format on this site.There was no decrease in video quality as well.

Using Webm videos on your website

Embedding video on website is not a simple task.There was no simple tag available in HTML prior to HTML5 to embed video on your website.HTML provides img tag to add images on your website.But there were no such tags for videos.But things changed in HTML5.HTML5 provides video tag to add videos on your website similar to that of img tag for images.

So earlier to add videos on website people used different video players.Many content management system like WordPress had plugins created just for this purpose.So all pages of your website saw slow load time because you wanted to add one video on a page.

HTML5 does made things easy by proving video tag.But the problem was too many video formats.Not all formats were supported by all browsers or majority of browsers.Before using webm on this site I thought of using mp4 format.Actually I was trying not to use any plugin yet use videos on my site.On this task I had option to use HTML5 video tag and video format supported by majority of browsers and having decent file size.

The choice was narrowed down to mp4,ogg and webm.The problem was that Firefox does not support mp4.So option was to deliver ogg file to Firefox and mp4 to other browsers.Also mp4 file size is greater than webm file size for same video quality.

So I decided to go with webm video format.Internet Explorer does not support webm video file but market share of it is going down.Also I had option to deliver mp4 file to Internet Explorer while delivering webm to other browsers.

Using HTML5 Video tag

To embed single video file using HTML5 video tag follow below code

<video width="560" height="420" controls="controls">
<source src="URL to your webm video file" type="video/webm">

As mentioned above webm is not supported by Internet Explorer.So in case you want to serve mp4 format file to Internet Explorer or browsers not compatible with webm then use below code

<video width="560" height="420" controls="controls">
<source src="URL to your mp4 video file" type="video/mp4">
<source src="URL to your webm video file" type="video/webm">

Feel free to share your thoughts or queries.Consider sharing the post in case you found this useful.

Leave a Comment