HTML5 Video tag, and webm

HTML5 Video tag, and webm

In ancient times, when youtube was born, we didn’t have 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 will work fine. Later on, when HTML5 became a industry standard, our live become some much easier.

In the theory VIDEO tag solves all out issues. When browser can handle webm (Chrome family) we play webm. If we deal with other browser – mp4 should do the work for us. So let’s test out 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 browsers 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 maniplulate video tag from 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