Why do we need to provide an .webm file extension inside <video> tag?

I need to show some Videos on the browser. Targeted browsers are IE8-above, firefox and chrome.
After some goggling I found that, http://v4e.thewikies.com/ can used to generate video tags with fall-back option.

So I generated this tag,

<video controls="controls" width="640" height="360">
        <source src="http://localhost/abc.mp4" type="video/mp4" />
        <source src="http://localhost/abc.webm" type="video/webm" />

        <object type="application/x-shockwave-flash" data="http://flashfox.googlecode.com/svn/trunk/flashfox.swf" width="640" height="360">
            <param name="movie" value="http://flashfox.googlecode.com/svn/trunk/flashfox.swf" />
            <param name="allowFullScreen" value="true" />
            <param name="wmode" value="transparent" />
            <param name="flashVars" value="controls=true&amp;src=http%3A%2F%2Flocalhost%2Fabc.mp4" />
            <span title="No video playback capabilities, please download the video below">Big Buck Bunny</span>

From this tag, what I understood is , our browser will use html5 video tag if its supported else it will fallback to use object tag.

But why we also need to provide .webm format for the same video i.e

<source src="http://localhost/abc.webm" type="video/webm" />

Is there any specific cases where mp4 does not works but .webm files works fine?

Source: cross-browser

Leave a Reply