Bandwidth detection Streaming plugin extensions - Demo 1 / 10

Introduction

Here we demonstrate our bandwidth detection streaming extension. It will check user's connection speed and serves the video accordingly. A faster speed means better video quality and larger file size. Click on the splash and you can see the calculated bandwidth below the video.

Your speed appears here.

HTML coding

Here we have the player container and the info box.

<a 
	href="http://static.flowplayer.org/video/skyandice.flv" 
	style="display:block;width:425px;height:300px;" 
	id="player">
	
	<!-- splash image inside the container -->
	<img src="/img/home/flow_eye.jpg" alt="Search engine friendly content" />
	
</a>

<div class="box info" id="info">
	Your speed appears here.
</div>

Flowplayer configuration

We use flowplayer.bwcheck-3.1.3.swf plugin for the detection. It downloads a file from the internet and calculates the download speed based on this file download. This is not 100% accurate but gives us enough information for the bandwidth detection. If you need accurate results you should look for the next demo.

flowplayer("player", "/swf/flowplayer-3.1.5.swf", {
		
	// configure the required plugin
	plugins:  {
		
		// bandwidth check plugin
		bwcheck: {  
			url: 'flowplayer.bwcheck-3.1.3.swf',   
			netConnectionUrl: '/swf/expressinstall.swf',
			bitrates: [40, 150, 400, 700, 1000],
		
			// this method is called when the bandwidth check is done
			onBwDone: function(url, chosenBitrate, bitrate) {
				var el = document.getElementById("info");
				el.innerHTML = "Your speed is: " +bitrate+ "<br />Video file served: " +url;
			}
		}
		
	},
	clip: {
		urlResolvers: 'bwcheck'
	}
	
});

You need to have different movie file for each bandwidth. This configuration uses following files

• skyandice-40.flv
• skyandice-150.flv
• skyandice-400.flv
• skyandice-700.flv
• skyandice-1000.flv