HTML5 Video Observations

January 28th, 2011

First off my goal is to run a bunch of 3-5 minute videos on any 1 single browser on a windows machine, It will run as a kiosk and will not have Internet access. So this finally gives me a good reason to play around with the <video> tag.

The videos were provided in a .mov format so being lazy I tried just sticking those videos in to chrome and it worked… sorta.

<video width=800 height=600><source src=video.mov></video>

Sound Played Every Other Load

Very quickly the problems started occurring. First off the sound stopped playing every other time the video was played.

That seems to be a bug and to fix it I had to  remove the old video tag and replace it every time I played a video.

Video Load Performance  Problems

Then I moved from the short demo videos (10 secs) to the full 3 min videos and right off the bat, I saw huge performance delays. So slow that it appeared the videos would not show and the Task Manager did not show activity. Perhaps there is a file max size I have missed?

Now faced with this major performance problem I set out to see which video format worked fastest on which browser, since I had the luxury of picking a browser.

I converted the video into the .ogv, .mp4 (H.264) and .webm using the  Miro Video Converter (Which is REALLY easy and simple). It gave me the following file sizes.

• .mov – 631,964KB (Original File)
• .mp4 – 210,954KB
• .mp4 – 66,280KB*
• .ogv – 144,690KB
• .webm – 25,315KB

*I ended up using the Adobe Media Encoder to reconvert the second (smaller) .mp4 because it gave better compression and wanted to see what kind of difference it made.

Using the following 3 browsers:

• Firefox 3.6.12
• Chrome 7.0.517.44
• Opera 10.63

Heres how each format worked in them.

Firefox:

• .mov, .mp4 and .webm – do not run
• .ogv – ran but was very slow to start, after that the video was smooth.

Chrome:

• .mov – would not run
• .mp4 – would not run
• .mp4 (smaller) – ran smoothly but took a minute to appear
• .ogv – seems to be sized differently, runs really jagged, and just overall unacceptable.
• .webm – Extremely responsive, but the quality was plain awful.

Opera:

• .mov, .mp4 – does not run
• .ogv – Responsive and smooth.
• .webm – Extremely responsive, but the quality was awful. (same as chromes webm)

Before I started I assumed Chrome/WebM would be the best overall bet, just from the chatter it has been creating. But it seems that I was wrong.

Overall the .ogv on Opera seemed to be the best option.

It does seem that there is a very apparent association between file-size and initial load time. (bandwidth ignored) But nothing I could find written on the matter, or how to improve it. (@CoryMathews if you know)

After all this it still seems like the HTML5 video tag is far from ready, but its a hell of a lot nicer to use then flash.

Great HTML5 Video Tag Articles

• Introduction to HTML5 Video – dev.opera.com
• Everything you need to know about HTML5 Video and Audio 2 – dev.opera.com
• HTML5 Video – diveintohtml5.org

Sample Source  Code

Page Structure-ish

...
<script src="jquery.js"></script>
<style>
  #VideoShow { display:none; top:0; left:0; }
  #closeVid { position:absolute; top:0;z-index:5; display:none; }
</style>
...
<div id="But1"></div>
<div id="But2"></div>
...
<div id='closeVid'><img src='close.jpg'></div>
<div id="VideoShow"></div>
...
$("#But1").click(function(){ playVideo("video.mov"); });
$("#But2").click(function(){ playVideo("video.mp4");  });

function playVideo(videoName) {
  $("#VideoShow").fadeIn(300).html("<video width=800 height=600><source src=\"" + videoName + "\"'></video>");
  $("#closeVid").fadeIn(300);
  var Vid = document.getElementsByTagName('video')[0];
  Vid.play();
  Vid.addEventListener('ended', function(e) {
    closeVideo();
  }, false);
}

function closeVideo() {
  var Vid = document.getElementsByTagName('video')[0];
  Vid.removeEventListener('ended', arguments.callee, false);
  $("#VideoShow").fadeOut(300).html("");
  $("#closeVid").fadeOut(100)
}