Introduction
Here we demonstrate our bandwidth detection streaming extension together with Adobe's Flash Media Server which offers server-side support for bandwidth checking. This will give more reliable results than a simple HTTP-based file-download check.
HTML coding
Here we have the player container and the info box:
<a
href="bbb"
style="display:block;width:425px;height:300px;"
id="rtmpPlayer">
<!-- splash image inside the container -->
<img src="/img/home/flow_eye.jpg" alt="Search engine friendly content" />
</a>
<div class="box info" id="rtmpInfo">
Click on the splash image above.
</div>
Flowplayer configuration
This time we use two plugins: the RTMP plugin and the bandwidth check plugin. Our video is hosted on the Influxis hosting service which offers Flash Media Server hosting.
flowplayer("rtmpPlayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.4.swf", {
// configure the required plugins
plugins: {
// RTMP streaming plugin
rtmp: {
url: 'flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://cyzy7r959.rtmphost.com/flowplayer'
},
// bandwidth check plugin
bwcheck: {
url: 'flowplayer.bwcheck-3.2.2.swf',
// Influxis uses Flash Media Servers
serverType: 'fms',
// Use this connection for bandwidth detection
netConnectionUrl: 'rtmp://cyzy7r959.rtmphost.com/flowplayer',
// this method is called when the bandwidth check is done
onBwDone: function(url, chosenBitrate, bitrate) {
var el = document.getElementById("rtmpInfo");
el.innerHTML = "Your speed is: " +bitrate+ "<br />Video file served: " +url;
}
}
},
// configure the clip to use the rtmp plugin for providing video data
// and the bwcheck plugin in resolving the URLs
clip: {
provider: 'rtmp',
// use bwcheck for all clips
urlResolvers: 'bwcheck',
// the bitrates, video dimensions and file names for this clip
bitrates: [
{ url: "bbb-1600.mp4", width: 1080, height: 608, bitrate: 1600 },
{ url: "bbb-1200.mp4", width: 720, height: 406, bitrate: 1200 },
{ url: "bbb-800.mp4", width: 480, height: 270, bitrate: 800 },
{ url: "bbb-400.mp4", width: 320, height: 180, bitrate: 400 }
],
}
});
Take a look at a standalone version of this demo. View its source code to get things going on your page.