HTML5 Video tag, and webm

In ancient times, when youtube was born, we didn’t have a VIDEO tag. We used to have Flash. To play video on the website, we had to convert it to weird Flash video format, leave mp4 for safety and hope that everything would work fine. Later on, when HTML5 became an industry standard, our lives became much easier.

In theory, VIDEO tag solves all our issues. When the browser can handle webm (Chrome family) we play webm. If we deal with other browsers – mp4 should work for us. So let’s test our theory.

<video controls="" id="video" width="960" height="720">
  <source src="video.mp4" id="mp4" type="video/mp4">
  <source src="video.webm" id="webm" type="video/webm">
 Your browser does not support the video tag.
</video>

Looks good. But if you run this code on Chrome browser, you can notice that the browser is still playing “mp4” instead of optimized webm. Why? Because browsers are dumb. They read source tags in order of appearance and chose first “playable” video format. So to correct this mistake, we need something like that:

<video controls="" id="video" width="960" height="720">
  <source src="video.webm" id="webm" type="video/webm">
  <source src="video.mp4" id="mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

The second interesting case is when we are trying to manipulate video tag from the JavaScript level

var video = document.getElementById('video');   
 
// load and play video
video.load();
video.play();

Without video.load() tag out video won’t recognize .webm file if it was created dynamically