I’m using html5 video and other tags for a new project.

In theory I didn’t have to use the <video> tag, since the previous version, in Flash, was working in all browsers. However, I wanted to adopt (and test) html5 video.

My first impression is: great! simplified and neat html code, but IE, as always, become a much annoying animal to tame.

I followed the instructions at Video for Everybody! and it didn’t work out-of-the-box on IE. I tried then to use the video for everybody GENERATOR and still didn’t work…

After so much trying and playing around, I started to analyse a bit more the Generator and since the code didn’t work for me (some forum posts were mentioning that wouldn’t work locally because of flash settings) I checked an example on the Flowplayer website itself. And did some modifications…

So, the code that was on Video for everybody was similar to this:

<!-- "Video For Everybody" v0.4.2 by Kroc Camen of Camen Design -->
<video controls="controls" poster="myposter.jpg" width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4" />
  <source src="myvideo.webm" type="video/webm" />
  <source src="myvideo.ogv" type="video/ogg" />
  <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="config={'playlist':['myposter.jpg',{'url':'myvideo.mp4','autoPlay':false}]}" />
    <img alt="My video title" src="myposter.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
  </object>
</video>
<p>
  <strong>Download video:</strong> <a href="myvideo.mp4">MP4 format</a> | <a href="myvideo.ogv">Ogg format</a> | <a href="myvideo.webm">WebM format</a>
</p>

Where, of course I changed their video examples to myposter.jpg and myvideo.mp4 (or other format).

I then used the html5 part from the code above and used the fallback part from the example on the Flowplayer website and the code I got working then became:

<video controls autoplay poster="myposter.jpg" width="640" height="360">
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  <source src="myvideo.ogv" type="video/ogg">
  <!-- this A tag is where your Flowplayer will be placed.  -->
  <a href="myvideo.flv" style="display:block;width:640px;height:360px" id="player"> </a>
  <!-- this will install flowplayer inside previous A- tag. -->
  <script> flowplayer("player", "flowplayer/flowplayer-3.2.7.swf");</script>
</video>

Spotted the difference???

Well, first, I liked the approach of NOT using the <object> tag; the Flowplayer used <a> tag which seems much cleaner and tidy. And I also used the Flowplayer downloaded from their website instead of the link to flowplayer.org, it seems that some instances of IE prefer this way….

So, now I’m a happy bunny!!! And just for fun, I copied the code from the test page of Video for everybody so you can watch the bunny video:

Download video: MP4 format | Ogg format | WebM format

OBS: if the above video doesn’t play on your browser don’t blame me! I just copied and paste it, if you want to work use my suggestion above! 😉