High quality videos without user disappointment

Version 0.1, 16.04.2008, Tero Piirainen

The Goal

We want to show video in high quality so that the video will play even if the detected Flash version does not support H.264 encoded videos. Click on the following image to see if your player supports H.264 videos. You will see the difference, if it is supported - trust me.

Features

• Users with Flash 9.115 and above can enjoy super high quality H.264 videos and older Flash versions are served with normal FLV video. In programming world this is called graceful degration. And by the way your version is .
• Flowplayer flash component is not initially loaded to make overall page load faster. Instead it is loaded when user clicks on the splash image or the playlist entries.
• A simple play button is added on top of the splash image that teases users to click. You can freely use this play button on your sites if you want.
• This code is tested with IE6, IE7, Safari and Firefox but it should work on other browsers as well.

The Solution

The above example is presented here without any modifications or shortcuts. You can see the same code from the page source. The only external resource is flashembed.js which is used to embed our Flash object to the page.

This is our HTML structure.

<!-- 
   DIV element that is replaced with Flowplayer. It is 
   inially loaded with a splash image and a play button.
-->
<div id="player" style="width:550px;height:330px;cursor:pointer">

	<!-- splash image -->
	<img src="img/demo/h264.jpg" border="0" id="splash" />
	
	<!-- 
		play button that is positioned over the image.
		only PNG supports this kind of semi-transparency
	-->
	<img src="img/btn/play.png" border="0" 
		style="position:relative;top:-210px;left:240px" />
</div>

JavaScript code

Here is the JavaScript code that can be placed anywhere on the page. Anyway it is recommeded that you put this inside head tag of your page. If you look at the code you can see the whole functionality can be accomplished with one single flashembed call!

window.onload = function() { 
	
	// create Flowplayer instance into DIV element whose id="player"
	flashembed("player", {
		src: 'video/FlowPlayerLight.swf', 
		
		// Flash is loaded upon user click, not before 
		loadEvent: 'click',
		
		// H.264 support was implemented in flash version 9.0.115
		version: [9,115],
		
		// lower version detected
		onFail: function(flashVersion, flowplayerConfig) {
		
			/*** this- variable points to current flash parameters ***/
			
			// no version detection on our second try (but you can do it)
			this.version = null;
			this.onFail = null;
			
			// setup same video in FLV format 
			flowplayerConfig.config.videoFile = 
				'http://blip.tv/file/get/Thameth-SkyAndIceTimelapse532.flv'
			;	 
			
			// perform new flashembed() call with our new configuration
			flashembed("player", this, flowplayerConfig);
		} 
	}, 
	
	// this configuration is given in our first try
	{config: { 
		videoFile:'http://blip.tv/file/get/Thameth-SkyAndIceTimelapse532.m4v',
		initialScale: 'scale'	 
	}});		 
}  

As you can see flashembed has many "hidden" powers.