Issue with HTML5 video not playing

Question

Hi,
I've set up a simple HTML5 video test in Dreamweaver CS4.  I pulled the code needed from the W3 schools site:
http://www.w3schools.com/html5/html5_video.asp
After making a few adjustments in my code for file path and dimensions, I uploaded the clip and web page it to my server.  Here is the result and I'm having trouble with browsers; in Chrome it plays great; in IE 9, the video is jerky and the toolbar does not have the fullscreen option like in Chrome:
http://designerandpublisher.com/multimedia/5/video.html
I also uploaded everything to a second server, one completely different than the one above.  The result is worst - again, the video plays fine in Chrome, but in IE9, the video does not even show up at all.  See below:
Does anyone know how to resolve this?  Thanks.

Answer 1

In the end, you should end up with a piece of code that looks something like this:
<video id="YourID" width="600" height="400" preload="auto" autobuffer autoplay controls>
  <source src="YourVideo.mp4" type='video/mp4; codecs="h.264, aac"' />
  <source src="YourVideo.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="YourVideo.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <object width="600" height="400" type="application/x-shockwave-flash"
    data="flowplayer-3.2.7.swf">
    <param name="movie" value="flowplayer-3.2.7.swf" />
    <param name="allowfullscreen" value="true" />
    <param name="flashvars" value='config={"clip": {"url": "YourFullVideoPath.mp4", "autoPlay":false, "autoBuffering":true}}' />
    <p>Download video as <a href="YourVideo.mp4">MP4</a>, <a href="YourVideo.webm">WebM</a>, or <a href="YourVideo.ogv">Ogg</a>.</p>
  </object>
</video>
This has all 3 video formats and a Flash fallback that plays the mp4.
I use http://www.mirovideoconverter.com/ to convert to all the formats required, which I just realised Jon has already mentioned. It's a very easy converter.