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)
}

I quickly created a very basic (and very bad) model of a cup to see how it looked when I exported the cup in the .raw format. You can export a blender model using this format by first selecting the object you want to export (For whatever reason only the selected object(s) will be exported.) Then go to File -> Export -> Raw Faces(.raw). This is what I got after exporting. There shouldn’t be line wraps, however depending on your monitor you may see them. You can download the file in .raw format here.

0.011633 -0.011633 0.011633 -0.001836 -0.016245 0.011633 -0.001512 -0.011633 -0.011633 0.008956 -0.008956 -0.011633
-0.001836 -0.016245 0.011633 -0.011633 -0.011633 0.011633 -0.008956 -0.008956 -0.011633 -0.001512 -0.011633 -0.011633
0.008956 0.008956 -0.011633 -0.001512 0.011633 -0.011633 -0.001836 0.016993 0.011633 0.011633 0.011633 0.011633
-0.001512 0.011633 -0.011633 -0.008956 0.008956 -0.011633 -0.011633 0.011633 0.011633 -0.001836 0.016993 0.011633
0.011633 -0.001745 -0.011633 0.008956 0.008956 -0.011633 0.011633 0.011633 0.011633 0.016943 -0.002119 0.011633
0.016943 -0.002119 0.011633 0.011633 -0.011633 0.011633 0.008956 -0.008956 -0.011633 0.011633 -0.001745 -0.011633
-0.011633 -0.011633 0.011633 -0.016295 -0.002119 0.011633 -0.011633 -0.001745 -0.011633 -0.008956 -0.008956 -0.011633
-0.016295 -0.002119 0.011633 -0.011633 0.011633 0.011633 -0.008956 0.008956 -0.011633 -0.011633 -0.001745 -0.011633
-0.001512 -0.011633 -0.011633 -0.001512 -0.001745 -0.011633 0.011633 -0.001745 -0.011633 0.008956 -0.008956 -0.011633
0.008956 0.008956 -0.011633 0.011633 -0.001745 -0.011633 -0.001512 -0.001745 -0.011633 -0.001512 0.011633 -0.011633
-0.008956 -0.008956 -0.011633 -0.011633 -0.001745 -0.011633 -0.001512 -0.001745 -0.011633 -0.001512 -0.011633 -0.011633
-0.011633 -0.001745 -0.011633 -0.008956 0.008956 -0.011633 -0.001512 0.011633 -0.011633 -0.001512 -0.001745 -0.011633
-0.011633 0.011633 0.011633 -0.016295 -0.002119 0.011633 -0.013645 -0.001861 0.011633 -0.009766 0.009583 0.011633
-0.016295 -0.002119 0.011633 -0.011633 -0.011633 0.011633 -0.009766 -0.009779 0.011633 -0.013645 -0.001861 0.011633
0.011633 -0.011633 0.011633 0.016943 -0.002119 0.011633 0.014015 -0.001861 0.011633 0.009596 -0.009779 0.011633
0.016943 -0.002119 0.011633 0.011633 0.011633 0.011633 0.009596 0.009583 0.011633 0.014015 -0.001861 0.011633
-0.011633 -0.011633 0.011633 -0.001836 -0.016245 0.011633 -0.001613 -0.013616 0.011633 -0.009766 -0.009779 0.011633
-0.001836 -0.016245 0.011633 0.011633 -0.011633 0.011633 0.009596 -0.009779 0.011633 -0.001613 -0.013616 0.011633
-0.001836 0.016993 0.011633 -0.011633 0.011633 0.011633 -0.009766 0.009583 0.011633 -0.001613 0.014044 0.011633
0.011633 0.011633 0.011633 -0.001836 0.016993 0.011633 -0.001613 0.014044 0.011633 0.009596 0.009583 0.011633
0.009596 0.009583 0.011633 -0.001613 0.014044 0.011633 -0.001311 0.010066 -0.007815 0.006850 0.006819 -0.007815
-0.001613 0.014044 0.011633 -0.009766 0.009583 0.011633 -0.007247 0.006819 -0.007815 -0.001311 0.010066 -0.007815
-0.001613 -0.013616 0.011633 0.009596 -0.009779 0.011633 0.006850 -0.007278 -0.007815 -0.001311 -0.010072 -0.007815
-0.009766 -0.009779 0.011633 -0.001613 -0.013616 0.011633 -0.001311 -0.010072 -0.007815 -0.007247 -0.007278 -0.007815
0.014015 -0.001861 0.011633 0.009596 0.009583 0.011633 0.006850 0.006819 -0.007815 0.010067 -0.001513 -0.007815
0.009596 -0.009779 0.011633 0.014015 -0.001861 0.011633 0.010067 -0.001513 -0.007815 0.006850 -0.007278 -0.007815
-0.013645 -0.001861 0.011633 -0.009766 -0.009779 0.011633 -0.007247 -0.007278 -0.007815 -0.010071 -0.001513 -0.007815
-0.009766 0.009583 0.011633 -0.013645 -0.001861 0.011633 -0.010071 -0.001513 -0.007815 -0.007247 0.006819 -0.007815
-0.001311 0.010066 -0.007815 -0.001115 -0.001287 -0.007815 0.010067 -0.001513 -0.007815 0.006850 0.006819 -0.007815
-0.001115 -0.001287 -0.007815 -0.001311 -0.010072 -0.007815 0.006850 -0.007278 -0.007815 0.010067 -0.001513 -0.007815
-0.007247 0.006819 -0.007815 -0.010071 -0.001513 -0.007815 -0.001115 -0.001287 -0.007815 -0.001311 0.010066 -0.007815
-0.010071 -0.001513 -0.007815 -0.007247 -0.007278 -0.007815 -0.001311 -0.010072 -0.007815 -0.001115 -0.001287 -0.007815

Basically, if you haven’t already noticed, it is 4 sets of x,y,z points. You will not get any of the materials when you export the object only the polygons.

Now that we have our object we will need to be able to display it using opengl. First we must read in and store the points.

CupVectors[3][4][33];

ifstream cupFile;
cupFile.open(“cup.raw”);

for(int z=0;z<=32;z++)
for(int y=0;y<=3;y++)
for(int x=0;x<=2;x++)
cupFile >> CupVectors[x][y][z];

cupFile.close();

Pretty simple code. Store the points, open the file, loop through the points, store the points, close the file.

Now that the cup vertex points are stored we are able to easily display them in opengl with another small loop that will create the triangles and save them in our display list.