html5 video tag??? Created Jan 9, 2010

Does anyone have an update to this inquiry? Leveraging flowplayer but reverting / falling back to HTML5 for browsers that don't support Flash (ie mobile devices, iPhones, iPads, etc ...)?

Here is how i do it using jquery

	<script type="text/javascript">
			//<![CDATA[ 
			window.onload = function() { 
 
             
   if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
     $("#videoFlashPlayerContainer").html('<video src="http://domain.com/video/videofile.mp4" width="640" height="360" controls="controls" poster="http://domain.com/image/splash.jpg"></video>');
   }          
   else {
  $f("videoFlashPlayerContainer", 'flowplayer.swf', {
  clip: {

...

I'm using jquery to inject the video tag into the div that flowplayer normally fills and bypassing $f if the device is an iPad/iPod/iPhone since it wouldnt work anyway. Maybe there is a cleaner way to do this but this is work for me for now.

The poster attribute only works on iphone. On ipad I'm told you have to encode your poster image into the first frame of the video file or it will just show whatever happens to be the first frame, even just black if it fades in like my videos...

Here is how I use a video tag with fallback to FlowPlayer. In this instance I am using only .mp4 with h.264:

<div id="video-embed-container" style="width:480px;height:270px">
<a href="SOURCE.mp4">Download Video</a>
</div>
<script type="text/javascript" src="embed.js"></script>

// embed.js snip
(function() {
	var video = document.createElement('video');
	// ...

	if (!!video && !!video.canPlayType && video.canPlayType(mp4Type) != '') {
		addVideo();
	}
	else {
		addFlash();
	}
	
})();

Then in my addVideo function I set video.onerror = addFlash. that way, if the browser can't play that codec after all, it will switch to flash.

The addFlash function just sets the innerHTML of the embed container to <object> with <param/> tags.

How would it all be improved if the program flow was like this...

1) HTML5 Video Tag
2) Overwrite with the Flowplayer if JS & Flash are available

eg...
<video>
<vid mp4/>
<vid ogg/>
</video>

<script>
add fplayer
</script>

+1 to this simple workflow. Currently evaluating sublimevideo.net and this is how they do it.