How To Publish HTML5 Video Tag With Fallback Mechanism

How To Publish HTML5 Video Tag With Fallback Mechanism

It's all the rage. A debate about codec rages on and as such we need to stay on the cutting edge. Right now the cutting edge consists of implementing it as well as deciding which video format to support. So in part 1 of the ReelSEO HTML 5 How-To series we show you how to implement an HTML 5 video player with support for both Theora and H.264 as well as fallback for non-HTML-5-compatible browsers. Let's start coding!

Html 5 <video>

The implementation of the HTML 5 <video> tag is a major setback for many. On top of that not all browsers currently support it, and they support two competing video formats. With all of that said, we thought it would be best to show you exactly how to set it all up so that you can serve your video to everyone, with or without Flash capabilities.

First off is building the HTML 5 video tag which has the following attributes (at present but could be subject to change in the future)

  • autoplay - autoplay If present, then the video will start playing as soon as it is ready
  • controls - controls If present, controls will be displayed, such as a play button.
  • height - pixels Sets the height of the video player
  • loop - Yes/No If present, the media file will start over again, every time it is finished.
  • preload - preload If present, the video will be loaded at page load. Ignored if "autoplay" is present.
  • src - The URL of the video to play with fallback to other codecs
  • width - pixels Sets the width of the video player
  • poster - url Image to show while movie loads.

So a simple tag containing most of the attributes would look like:
<video width="600" height="338" poster="/POSTER.jpg" controls autoplay>
<!-- HTML 5 browsers will play one of these -->
<source src="/VIDEO.m4v" type="video/mp4" /></source>
<source src="/VIDEO.ogv" type="video/ogg" /></source>
You need an HTML 5-capable browser.
</video>

<video width="600" height="338" poster="/POSTER.jpg" controls autoplay>
    <!-- HTML 5 browsers will play one of these -->
    <source src="/VIDEO.m4v" type="video/mp4" /></source>
    <source src="/VIDEO.ogv" type="video/ogg" /></source>
  You need an HTML 5-capable browser.
  </video>

You can even help the browsers further by including exactly the codecs used in type. For a fairly complete list of types with certain profiles and audio codecs I suggest looking at Chipwreck who has a nice listing. Also, the use of the close tags for the source will get rid of any potential problems with browsers not understanding.

Also note, the iPad needs that .m4v source file to be listed first in order for it to operate properly. I was inclined to put Theora first but found out that wouldn't work.

Now this first example only lists two formats of video to ensure that all of the HTML 5 compatible browsers have a version they can view (Theora or H.264). This means that you may have extra cost in regards to storing more files as well as encoding to different formats. However, the example videos average about 8Mb for the 48 second clip so it's not really a question of storage space that will be a hassle.

I did have some problems getting the Theora video into the proper format using Super and Handbrake. Then I found Firefogg which is a plug-in for Firefox with a fair amount of features that allowed me to encode the video right from the browser window. I thought that was pretty slick and it did a fantastic job of keeping the quality quite high for both video and sound. In fact, the quality of that video is higher than the Flash (.flv).

There is no fallback to non-compatible browsers in that first example so let's look at building that. It gets a bit more complicated so I'll break it up into pieces then show you the full code at the bottom.

With Flash Fallback

First off we have the standard HTML 5 <Video> (same as above)

<video width="600" height="338" poster="http://www.reelseo.com/html5/files/jeroen-jw-wijering-640.jpg" controls>

<!-- HTML 5 browsers will play one of these -->
<source src="http://www.reelseo.com/html5/files/jeroen-jw-wijering-640.m4v" type="video/mp4" />
<!-- H.264 --> </source>

<source src="http://www.reelseo.com/html5/files/jeroen-jw-wijering-640.ogv" type="video/ogg" />
<!-- Theora --></source>

But instead of closing the tag right away we slide in some code that checks the IE browser version. Browsers newer than IE v6.0 will see the Flash version of the video. Of course if you have Google Chrome Frame installed in your Internet Explorer you'll need to turn that off so you can see the Flash fallback (trust me, it works fine).

<!-- Flash-capable browsers without HTML 5 support, try to play this -->

<!--[if gt IE 6]>

<!-->
<object type="application/x-shockwave-flash" width="600" height="338" wmode="transparent" data="http://www.gamersdailynews.com/flvplayer.swf?file=http://www.reelseo.com/html5/files/jeroen-jw-wijering-640.flv&image=http://www.gamersdailynews.com/videoback.jpg&logo=http://www.gamersdailynews.com/gndtrailerlogo.png&backcolor=000000">
<param name="movie" value="http://www.gamersdailynews.com/flvplayer.swf?file=http://www.reelseo.com/html5/files/jeroen-jw-wijering-640.flv&image=http://www.gamersdailynews.com/videoback.jpg"/>
<param name="wmode" value="transparent" />
</object>
<br>Alright, so no HTML 5 Support, How about Flash?
<!--<![endif]-->
</video>

Notice it's just a standard, basic Flash embed wrapped in the If statement inside of the HTML 5 <video> tag. Now that should get just about everyone and only requires three versions of the video file. But it's entirely possible that someone might come to your site and none of those will work. So let's include some Quicktime fallback as well. This will then allow those with no HTML 5 or Flash to still see the video, possibly. How do we get them into the mix?
Prior to the </video> tag we add the following:

<!-- No Flash or HTML 5 so let's try Quicktime -->
<!--[if !IE]>
<!-->
Well, no HTML 5 or Flash, let's try Quicktime.<BR>
<object width="600" height="338" type="video/quicktime">
<param name="src" value="http://www.reelseo.com/html5/files/jeroen-jw-wijering-640.m4v" />
<img src="http://cdn3.reelstatic.com/wp-content/uploads/2010/06/videoback.jpg?0f0635" width="600" height="338" />
</object>
<p> Wow, you really haven't upgraded lately have you? Your browser is unable to play HTML 5 with either Theora or H.264.
It also can't manage Flash nor can it do Quicktime. Perhaps it's time to get a new browser.
</p>
<!--<![endif]-->
</video>

Now the big question, does it work? More importantly, does it work exactly like it should? The answer is a resounding YES. With just three versions of the video, a whopping 24Mb in this 48 second example, I have built a video tag that will allow almost all video-capable browsers access to the video in question.
Some issues I ran into that had to be addressed while piecing this together and the solutions follow:

  • iPad needs the .m4v
  • tag to be first. Other HTML 5 browsers don't care so there is no conflict.

  • I couldn't get a proper encoding for the Theora until I found Firefogg
  • The iPhone didn't want any video extension except .m4v (.avi and .mp4 did not work either).
  • For Google Chrome Frame to recognize the HTML 5 code in the page in Internet Explorer 8 the following needed to be added to the page:
  • Firefox does not accept the Poster attribute yet so if you want a poster image make it the first frame of the Theor-encoded video.

Value vs. Cost

Considering that this complete code will cover almost every browser you would like to be able to see your video, the value is pretty high, especially with the iPhone/Pod/Pad rage sweeping the planet. No matter what happens with the HTML 5 video codecs viewers will find some way to see your videos. The cost is that it takes a bit of time to implement but once you have it setup you could easily drop in some code, in language of choice, to allow for a database-driven video site to built from this. What that means is that you don't have to completely recreate this code time and again. You can simply use it as is and with some database calls bring all your videos into the system.

The cost is that you would have to encode three versions of every video. This isn't all that costly in regards to time. For the 48 second video clip I used it was a matter of a few minutes to encode all three versions. Obviously for higher quality videos it's going to take longer as well as take more than the 24Mb (or so) of space that these three did.
Then again, the much larger number of users you could reach might just offset that cost.

Entire Code:

Begin HTML5 test with fallback for all HTML 5 browsers, then Flash, then Quicktime <BR>
<video width="600" height="338" poster="http://www.gamersdailynews.com/videoback.jpg" controls>
<!-- HTML 5 browsers will play one of these -->
<source src="http://www.reelseo.com/html5/files/jeroen-jw-wijering-640.m4v" type="video/mp4" /> <!-- H.264 --> </source>
<source src="http://www.reelseo.com/html5/files/jeroen-jw-wijering-640.ogv" type="video/ogg" /> <!-- Theora --> </source>
<!-- Flash-capable browsers without HTML 5 support, try to play this -->
<BR> <!--[if gt IE 6]>
<!-->
<object type="application/x-shockwave-flash" width="600" height="338" wmode="transparent" data="http://www.gamersdailynews.com/flvplayer.swf?file=http://www.reelseo.com/html5/files/jeroen-jw-wijering-640.flv&image=http://www.gamersdailynews.com/videoback.jpg&logo=http://www.gamersdailynews.com/gndtrailerlogo.png&backcolor=000000">
<param name="movie" value="http://www.gamersdailynews.com/flvplayer.swf?file=http://www.reelseo.com/html5/files/jeroen-jw-wijering-640.flv&image=http://www.gamersdailynews.com/videoback.jpg"/>
<param name="wmode" value="transparent" /></center>
</object>
<br>Alright, so no HTML 5 Support, How about Flash?
<!--<![endif]-->
<BR>
<!-- No Flash or HTML 5 so let's try Quicktime -->
<!--[if !IE]>
<!-->
Well, no HTML 5 or Flash, let's try Quicktime.<BR>
<object width="600" height="338" type="video/quicktime">
<param name="src" value="http://www.reelseo.com/html5/files/jeroen-jw-wijering-640.m4v" />
<img src="http://cdn3.reelstatic.com/wp-content/uploads/2010/06/videoback.jpg?0f0635" width="600" height="338" />
</object>
<p> Wow, you really haven't upgraded lately have you? Your browser is unable to play HTML 5 with either Theora or H.264.
It also can't manage Flash nor can it do Quicktime. Perhaps it's time to get a new browser.
</p>
<!--<![endif]-->
</video>

The ReelSEO HTML 5 How-to Series: Part 1 - Video with Fallback

Begin HTML5 test with fallback for all HTML 5 browsers, then Flash, then Quicktime




Alright, so no HTML 5 Support, How about Flash?

Well, no HTML 5 or Flash, let's try Quicktime.

Wow, you really haven't upgraded lately have you? Your browser is unable to play HTML 5 with either Theora or H.264.It also can't manage Flash nor can it do Quicktime. Perhaps it's time to get a new browser.

Don't Miss Any Stories!

Get daily online video news, tips and trends via email!

Posted in Video Technology
About the Author -
Mark Robertson is the Founder and Publisher of ReelSEO, an online information resource dedicated to the fusion of video, technology, social media, search, and internet marketing. He is a YouTube Certified, video marketing consultant and video marketing expert, popular speaker, and considered to be a passionate leader within the online video and search marketing industries. View All Posts By -

What do you think? ▼
↑ Top