HTML5 Video with Flash Fallback / Flash Video with Mobile Fallback*

Posted on July 28th, 2010 by Michael

*Due to popular demand on The Twitter, the name of this post was changed.
**Check out Norm’s new post for our easy to use javascript html5 video library and WordPress plugin.

We’ve recently been crafting a new site for our company (view it here) and fate bestowed upon me the task of developing the HTML version of the site. (Actually, it was my poor performance in a finger pulling contest, but I like to think a higher power, The Lich King, was involved).

Since we are also developing a full flash version of the site, the goal of the HTML version was to rely mainly on Web Standards and the newly popular HTML5 video tag for showcasing moving pictures.

This was my first attempt at integrating HTML5 and I quickly learned that a number of quirks must be addressed when deploying video in this fashion. There’s nothing groundbreaking about this post; however, I’m hoping it serves to be a comprehensive summary of how to integrate HTML5 with the following criteria:

- Compatibility with all current browser implementations of HTML5 (H.264 and Theora)
- Flash fallback for older gen browsers
- Platform detection
- Mobile device support

The final result of my efforts can be viewed here by a Desktop PC or iOS / Android device: http://labs.byhook.com/html5video/

The Code

With the plot set, let’s get started… My first stop on the tour was: http://camendesign.com/code-is-art/video_for_everybody. While the author seems to have a visceral hatred for a certain 3^rd party plugin, he does have a nice write up on HTML5 video with Flash fallback. However, he seems to stop a bit short when it comes to platform detection and Android support. With his code in hand, I started out with an already working model:

<video width="980" height="390" controls autobuffer>
 
	<!-- MP4 must be first for iPad! -->
	<!-- WebM videos can also be added here -->
	<source src="telematics_desktop.mp4" type="video/mp4" /> <!-- Webkit video -->
	<source src="telematics_desktop.ogv" type="video/ogg" /> <!-- Firefox / Opera -->
 
	<!-- Fallback to Flash. -->
	<!-- Add 24px to the height for the video player -->
	<object width="980" height="414" type="application/x-shockwave-flash" data="http://www.byhook.com/html/video/player.swf">
 
		<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
		<param name="movie" value="player.swf" />
		<param name="allowFullScreen" value="true" />
		<param name="flashvars" value="file=telematics_desktop.flv&image=telematics_desktop.jpg" />
 
		<!-- Fallback image. -->
		<img src="telematics_desktop.jpg" width="980" height="390" alt="telematics" title="No video playback capabilities." />
 
	</object>
 
</video>

**Note: Any player can be used in the flash embed. I used the free version of JW Player. Also, I updated the flash code since the poster frame syntax wasn’t working and the full screen param was missing.

Next up was adding in some basic User Agent conditionals to steer visitors to the right content for their platform (mobile or desktop):

<script language="JavaScript" type="text/javascript">
<!-- Platform Detection -->
if( navigator.userAgent.match(/webOS/i) ||
	navigator.userAgent.match(/iPhone/i) ||
	navigator.userAgent.match(/iPod/i) ||
	navigator.userAgent.match(/iPad/i) ||
	navigator.userAgent.match(/Android/i)
	){
		document.write('<video width="480" height="192" controls autobuffer poster="telematics_mobile.jpg">');
 
			document.write('<source src="telematics_mobile.mp4" type="video/mp4" />'); <!-- Webkit video -->
 
			<!-- Fallback image. -->
			document.write('<img src="telematics_mobile.jpg" width="480" height="192" alt="telematics" title="No video playback capabilities." />');
 
		document.write('</video>');
	}
else
  	{	
		document.write('<video width="980" height="390" controls autobuffer>');
 
			<!-- WebM videos can also be added here -->
			document.write('<source src="telematics_desktop.mp4" type="video/mp4" />'); <!-- Webkit video -->
			document.write('<source src="telematics_desktop.ogv" type="video/ogg" />'); <!-- Firefox / Opera -->
 
			<!-- Fallback to Flash. -->
			<!-- Add 24px to the height for the video player -->
			document.write('<object width="980" height="414" type="application/x-shockwave-flash" data="player.swf">');
 
				<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
				document.write('<param name="movie" value="player.swf" />');
				document.write('<param name="allowFullScreen" value="true" />');
				document.write('<param name="flashvars" value="file=telematics_desktop.flv&image=telematics_desktop.jpg" />');
 
				<!-- Fallback image. -->
				document.write('<img src="telematics_desktop.jpg" width="980" height="390" alt="telematics" title="No video playback capabilities." />');
 
			document.write('</object>');
 
		document.write('</video>');
    }
</script>

Last on the list was making sure that the above code worked on all our target platforms. In testing the system thus far, we came to find out that HTML5 video isn’t fully supported in the native Android browser. Thankfully, I was able to find some info on how to resolve the problem: http://stackoverflow.com/questions/1711078/html5-video-element-on-android

When adding the Android handler into the batter, I ended up including some conditionals around the code since having it active for all browsers broke some functionality. (i.e. the play button in Safari wouldn’t work):

<head>
 
<script language="JavaScript" type="text/javascript">
<!-- Android Event Handler -->
if( navigator.userAgent.match(/Android/i))
{
 
    function init() {
      enableVideoClicks();
    }
 
    function enableVideoClicks() {
      var videos = document.getElementsByTagName('video') || [];
      for (var i = 0; i < videos.length; i++) {
        // TODO: use attachEvent in IE
        videos[i].addEventListener('click', function(videoNode) {
          return function() {
            videoNode.play();
          };
        }(videos[i]));
      }
    }
 
}
 
</script>
 
</head>
 
<body>
 
<script language="JavaScript" type="text/javascript">
<!-- Android Event Handler -->
if( navigator.userAgent.match(/Android/i))
{
	window.onload = init;
}
</script>	
 
<script language="JavaScript" type="text/javascript">
<!-- Platform Detection -->
if( navigator.userAgent.match(/webOS/i) ||
	navigator.userAgent.match(/iPhone/i) ||
	navigator.userAgent.match(/iPod/i) ||
	navigator.userAgent.match(/iPad/i)
	){
		document.write('<video width="480" height="192" controls autobuffer poster="telematics_mobile.jpg">');
 
			document.write('<source src="telematics_mobile.mp4" type="video/mp4" />'); <!-- Webkit video -->
 
			<!-- Fallback image. -->
			document.write('<img src="telematics_mobile.jpg" width="480" height="192" alt="telematics" title="No video playback capabilities." />');
 
		document.write('</video>');
	}
else if( navigator.userAgent.match(/Android/i))
	{
	document.write('<video src="telematics_mobile.mp4" width="480" height="192" poster="telematics_mobile_play.jpg" controls onclick="this.play();"/>');
	document.write('</video>');
	}
else
  	{	
		document.write('<video width="980" height="390" controls autobuffer>');
 
			<!-- WebM videos can also be added here -->
			document.write('<source src="telematics_desktop.mp4" type="video/mp4" />'); <!-- Webkit video -->
			document.write('<source src="telematics_desktop.ogv" type="video/ogg" />'); <!-- Firefox / Opera -->
 
			<!-- Fallback to Flash. -->
			<!-- Add 24px to the height for the video player -->
			document.write('<object width="980" height="414" type="application/x-shockwave-flash" data="player.swf">');
 
				<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
				document.write('<param name="movie" value="player.swf" />');
				document.write('<param name="allowFullScreen" value="true" />');
				document.write('<param name="flashvars" value="file=telematics_desktop.flv&image=telematics_desktop.jpg" />');
 
				<!-- Fallback image. -->
				document.write('<img src="telematics_desktop.jpg" width="980" height="390" alt="telematics" title="No video playback capabilities." />');
 
			document.write('</object>');
 
		document.write('</video>');
    }
</script>
 
</body>

Now, that ends the code adventure part of the story. However, if you are less a fan of HTML5 and wish to solely use it as a backup for non-flash and mobile users; you can simply integrate a little more conditional magic courtesy of the Adobe Detection Kit.

A demo of Flash Video with HTML5 Fallback can be seen here: http://labs.byhook.com/html5video/flash.html

<head>
 
<script src="AC_OETags.js" language="javascript" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
		// Globals
		// Major version of Flash required
		var requiredMajorVersion = 8;
		// Minor version of Flash required
		var requiredMinorVersion = 0;
		// Minor version of Flash required
		var requiredRevision = 0;
</script>
 
<script language="JavaScript" type="text/javascript">
<!-- Android Event Handler -->
if( navigator.userAgent.match(/Android/i))
{
 
    function init() {
      enableVideoClicks();
    }
 
    function enableVideoClicks() {
      var videos = document.getElementsByTagName('video') || [];
      for (var i = 0; i < videos.length; i++) {
        // TODO: use attachEvent in IE
        videos[i].addEventListener('click', function(videoNode) {
          return function() {
            videoNode.play();
          };
        }(videos[i]));
      }
    }
 
}
 
</script>
 
</head>
 
<body>
 
<script language="JavaScript" type="text/javascript">
<!-- Android Event Handler -->
if( navigator.userAgent.match(/Android/i))
{
	window.onload = init;
}
</script>	
 
<script language="JavaScript" type="text/javascript">
<!-- Flash version check based upon the values entered above in "Globals" -->
var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
 
<!-- Platform Detection -->
if( navigator.userAgent.match(/webOS/i) ||
	navigator.userAgent.match(/iPhone/i) ||
	navigator.userAgent.match(/iPod/i) ||
	navigator.userAgent.match(/iPad/i)
	){
		document.write('<video width="480" height="192" controls autobuffer poster="telematics_mobile.jpg">');
 
			document.write('<source src="telematics_mobile.mp4" type="video/mp4" />'); <!-- Webkit video -->
 
			<!-- Fallback image.  -->
			document.write('<img src="telematics_mobile.jpg" width="480" height="192" alt="telematics" title="No video playback capabilities." />');
 
		document.write('</video>');
	}
else if( navigator.userAgent.match(/Android/i))
	{
	document.write('<video src="telematics_mobile.mp4" width="480" height="192" poster="telematics_mobile_play.jpg" controls onclick="this.play();"/>');
	document.write('</video>');
	}
else if(hasReqestedVersion) {	
 
		<!-- Fallback to Flash. -->
		<!-- Add 24px to the height for the video player -->
		document.write('<object width="980" height="414" type="application/x-shockwave-flash" data="player.swf">');
 
			<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
			document.write('<param name="movie" value="player.swf" />');
			document.write('<param name="allowFullScreen" value="true" />');
			document.write('<param name="flashvars" value="file=telematics_desktop.flv&image=telematics_desktop.jpg" />');
 
		document.write('</object>');
 
	} else {  // Flash is too old or we can't detect the plugin
 
		document.write('<video width="980" height="390" controls autobuffer>');
 
			<!-- WebM videos can also be added here -->
			document.write('<source src="telematics_desktop.mp4" type="video/mp4" />'); <!-- Webkit video -->
			document.write('<source src="telematics_desktop.ogv" type="video/ogg" />'); <!-- Firefox / Opera -->
 
			<!-- Fallback image. -->
			document.write('<img src="telematics_desktop.jpg" width="980" height="390" alt="telematics" title="No video playback capabilities." />');
 
		document.write('</video>'); 
	}
 
</script>
 
</body>

The Codecs

Encoding the videos is pretty straightforward; however, there is a bit of a battle going on as to what the standard should be, so multiple formats are required. The following is a table of formats supported by current browsers. Also, most browsers have announced WebM compatibility in future release builds.


Codecs/container	IE	Firefox	Safari	Chrome	Opera	iPhone	Android
Theora+Vorbis+Ogg	·	3.5+	·	5.0+	10.5+	·	·
H.264+AAC+MP4	·	·	3.0+	5.0+	·	3.0+	2.0+
WebM	·	·	·	·	·	·	·

**From: http://diveintohtml5.org/video.html

There are a lot of options for creating H264’s, but not many for Theora files. Google-ing around brings up a few open source encoders, but the easiest one I found was MiroConverter: http://www.mirovideoconverter.com/ All you do is drop on your source file, pick the format and hit the button. It also has some handy presets for mobile devices.

**Note: I was unable to encode Theora videos wider than 960px in any of the open source encoders.

Also, if you’re running Apache on your web server, you’ll need to include a .htaccess file with the following code to get the server to properly detect the video formats.

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

One Last Thing

When displaying the video on the HTML page, the iPhone overlays a nice play button graphic on top of the video to let the user know a video is present. Android currently doesn’t do this, so a simple fix is to just add a graphic to the poster image:

The End

There you have it folks, all that fun just to avoid using flash. A complete collection of all the code and videos I used can be downloaded here.

Additional Reading

- http://diveintohtml5.org/video.html
- http://html5doctor.com/the-video-element/
- http://camendesign.com/code/video_for_everybody
- http://developer.android.com/guide/appendix/media-formats.html
- http://mashable.com/2010/05/18/html5-video-tools/

html5, video

31 Responses to “HTML5 Video with Flash Fallback / Flash Video with Mobile Fallback*”

air jordan Thomas Sabo Charms says:

May 13, 2012 at 9:28 pm

according to Business Insider.Smith worked at Goldman Sachs through years of what had been called unscrupulous dealings, so why would Smith leave now?Henry Blodget, CEO and editor of Business Insider, said it was “highly unlikely” Smith, Goldman Sachs’ former head of equity derivatives business in Europe, Europe, air jordan Europe, the Middle East and Africa, was forced out before he wrote the New York Times op-ed, saying that fact would have been “the first thing” the investment bank would have mentioned in its response.Instead, the firm issued a statement saying, “We disagree with the views expressed, which we don’t

Reply
iPhone Application Developer says:

May 4, 2012 at 5:08 am

I am really impressed by this site and really gonna share this site to my friends even.

Reply
oakley sunglasses says:

April 17, 2012 at 1:09 am

When dealing with your issue of selecting from the artificial

Reply
Buy domain name in India says:

April 16, 2012 at 2:18 am

Now only I am learning html5. So this blog is very much useful for me to learn. Thanks for sharing…

Reply
Coach Outlet Online says:

March 31, 2012 at 12:59 am

The site also serves as a platform for releasing Flash tools developed internally to help streamline ad development.

Reply
oakleys says:

March 29, 2012 at 1:18 am

Welcome all the customers to come to our website

Reply
Jordans For Cheap says:

March 6, 2012 at 10:04 am

I agree with your point of view. Said to my hearts, ha ha! here is about jordans shoes:air jordan1-23

Reply
OPEL Tech2 scanner says:

February 27, 2012 at 3:22 am

obd2 store:lexia 3,j2534 …..more real cheap obd2 tools for you!welcome to order!

Reply
Air Jordan for sale says:

February 27, 2012 at 3:21 am

Your article let people thinking I read many classic statements and Nike basketball shoes come in many colors, sizes, and styles. you must like them!

Reply
Retro Jordans says:

February 27, 2012 at 3:20 am

Read your article has benefited from some place very deep some place very shallow out here are a lot about jordan shoes:retro jordans,jordan 1.

Reply
cheap oakley sunglasses says:

February 24, 2012 at 3:58 am

FFHFGFENTYWEFGFHFDAGGFMTR
i like it so much

Reply
Kfz-Diagnosegeräte says:

February 23, 2012 at 4:44 am

Many thanks for sharing This to us.

Reply
cheap christian louboutin says:

February 12, 2012 at 8:30 pm

XYLKNXJTOBGBSHL
His boots are coveted over the world, because all women, all over, like to view and sense beautiful.

Reply
oakleys sunglasses says:

January 12, 2012 at 12:15 am

XZKKNEDYZMSHX
Welcome to Oakley Sunglasses Hut to buy cool and cheap oakleys sunglasses.

Reply
Survey Software says:

December 20, 2011 at 3:59 am

Thanks for your good website and for sharing your experiences.

Reply
jerseysusa.com says:

December 20, 2011 at 2:16 am

Although a pioneer in the first round out of the cut, but lost 2-4 in the Western semifinals in Seattle, stop in front of the conference finals. At the same time, Olajuwon began to grow as the top center, Sampson injury but played only 43 games. Olajuwon both ends of the court to become a leader, averaged 24.3 points, 11.4 rebounds and 3.39 blocked shots, and get him a team of three consecutive seats in the nation’s first.

Reply
Wholesale nhl jerseys says:

December 19, 2011 at 10:20 pm

Wow, I’m obviously not being creative enough, haha…Great work!

Reply
Monster PowerBeats Sport Headphone says:

November 15, 2011 at 9:23 pm

This is a really good post.http://www.rockheadphone.com/lady-gaga-heartbeats-c-31.html
Must admit that you are amongst the best bloggers I have read. Thanks for posting this informative article.

Reply
iphoneappdevelopment says:

November 9, 2011 at 7:10 am

Nice Post. Thanks for your sharing.IPhone App Development

Reply
ugg boots clearance says:

November 8, 2011 at 4:04 am

XHPJOYQCC1F5HTFWXZ
all types of UGG boots for women and men to enjoy their life time

Reply
Cheap hockey jerseys says:

October 27, 2011 at 9:50 pm

After reading you site, Your site is very useful for me

Reply
north face jackets for women says:

October 14, 2011 at 12:15 am

Appreciate your sharing expressing consequently significative piece of writing along with us. Certainly along with your concept competely.My organization is anxious about one more excelllent content from your business. My Partner And I am getting at nike air jordans footwear is so well received, the actual environment the nike air jordan combination sports activity footwear is street fashion earning you money a large number of small individuals for example these people. Low-priced nike air jordan your five are generally incredibly hot marketing everywhere around the world.Gucci Birkenstock boston Pouches

Reply
GBC says:

February 14, 2011 at 6:27 am

Doesnt work on:

- Safari for Windows.
- IE 9

IE 6 – 8 (40 % Marketshare) Will fall back to FLV flash

IE 9 needs compatibility mode meta

Reply
iPhone Application says:

February 9, 2011 at 2:41 am

Hey man this is really a nice post i like it very much….

Reply
Toyhouse.cc | Blog | Toyhouse.cc now supports embedding HTML5 and Flash Video says:

December 16, 2010 at 11:09 am

[...] this post for more [...]

Reply
Ashe Dryden says:

November 18, 2010 at 12:34 pm

Used this on a project recently and it worked great. Had a few reports of choppiness/browser freezing in Firefox, but worked perfectly in IE6-8, Safari, Chrome, iPhone (3+), and Android.

Reply
Трафик says:

October 9, 2010 at 5:07 pm

Многие из них…

но можно было всё сделать иначе…

Reply
Using portable media players for Multimedia files says:

September 10, 2010 at 5:48 am

[...] and Review | GadgetPaper.com …SuperDVD Player 5 Review10 Best mobile phones | DownloadsEdgeHTML5 Video with Flash Fallback / Flash Video with Mobile Fallback … Tags: audio images, daps, iriver clix, liquid crystal display, playback capabilities, portable [...]

Reply
Laurent says:

September 9, 2010 at 10:52 am

Code is translating so i put it again with dot

$content = str_replace(“&.n.b.s.p;”, “”, $content);
$content = str_replace(“&.l.a.q.u.o;”, “\”", $content);
$content = str_replace(“&.r.a.q.u.o;”, “\”", $content);

Reply
Laurent says:

September 9, 2010 at 10:51 am

Hi,
On my wordpress server test, I had some trouble with the html encode.
So I had to add to make the plugin work :

$content = str_replace(“ ”, “”, $content);
$content = str_replace(“«”, “\”", $content);
$content = str_replace(“»”, “\”", $content);

Reply
Tweets that mention HTML5 Video with Flash Fallback and Vice Versa | Hook - Labs -- Topsy.com says:

July 28, 2010 at 9:21 am

[...] This post was mentioned on Twitter by Jesse Warden and TarasNovak, Mariano KIWO Carrizo. Mariano KIWO Carrizo said: HTML5 Video with Flash Fallback and Vice Versa http://icio.us/bc1uai [...]

Reply

Click here to cancel reply.

Labs.byHook

Flash Scripts, Tools & Methods Developed at Hook

Hook is a digital production company that develops interactive content for industry leading agencies and their brands. For more information visit www.byhook.com.

HTML5 Video with Flash Fallback / Flash Video with Mobile Fallback*

html5, video

31 Responses to “HTML5 Video with Flash Fallback / Flash Video with Mobile Fallback*”

Leave a Reply

Most Commented

Categories

Blogroll