Simple HTML5 Video

Safari, Firefox, and Chrome now support HTML5 video; Opera support is coming soon.  Since the iPhone does not support Flash (and there are more users every day, especially with the iPad coming), it’s time to begin the transition.  I was interested in a solution that supplemented or enhanced the Flash video using JWPlayer that I have been using for several years.  Here is a demo of simple HTML5 video.

There are a number of methods for using HTML5 and Flash together:

• html5 video fallbacks with markup
• Video for Everybody! This also includes an example for editing the .htaccess file in the footer of the post.
• Video Tag Embed With Fallbacks
• Video on the Web
• Using the HTML5 <video> tag with a Flash fallback
• Fallback options for HTML5 video
• Introduction to HTML5 video

Currently I prefer a simple version of Video for Everybody! and Video Tag Embed with Fallbacks.  I’m using H.264 mp4 video for Safari, iPhone, and Chrome, Ogg -Theora-Vorbis for Firefox and Opera, a flash player to play the H.264 mp4 for all IE and older browsers, and also providing the videos for download.  This is needed by the iPhone, depending on the video.

To get started with HTML5 on your server, you first need to add the correct mime types to the hidden .htaccess file on your hosting server.  Croc Camen has a wonderful example that also includes embedded fonts, as mentioned above. As a minimum, add this code:

AddType video/ogg .ogv
AddType video/ogg .ogg
AddType audio/ogg .oga
AddType video/mp4 .mp4

Then you need to convert your video into both Ogg and and H.264 mp4. formats and use them with the following code. More is coming on this.

This is the simple HTML5 video code:

<div id="videoarea" class="shadow">
     <video width="320" height="240" poster="Videos/cat.jpg" controls>
          <source src="Videos/cat.ogv" type="video/ogg" />
          <source src="Videos/cat.mp4" type="video/mp4" />
          <object width="320" height="240" type="application/x-shockwave-flash" data="player.swf">
            <param name="movie" value="player.swf" />
            <param name="allowFullScreen" value="true" />
            <param name="allowscriptaccess" value="always" />
            <param name="flashvars" value="file=Videos/cat.mp4&amp;image=Videos/cat.jpg&amp;controlbar=over" />
            <img src="Videos/cat.jpg" width="320" height="240" alt="HTML5 Video Demo" />
          </object>
     </video>
</div>
<p class="center">
     <a href="Videos/cat.mp4">Download MP4 Video</a> | <a href="Videos/cat.ogv">Download OGG Video</a>
</p>