Bandwidth detection with RTMP server Streaming plugin extensions - Demo 2 / 10
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="skyandice"
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", "/swf/flowplayer-3.1.5.swf", {
// configure the required plugins
plugins: {
// RTMP streaming plugin
rtmp: {
url: 'flowplayer.rtmp-3.1.3.swf',
netConnectionUrl: 'rtmp://cyzy7r959.rtmphost.com/flowplayer'
},
// bandwidth check plugin
bwcheck: {
url: 'flowplayer.bwcheck-3.1.3.swf',
// Influxis uses Flash Media Servers
serverType: 'fms',
// Use this connection for bandwidth detection
netConnectionUrl: 'rtmp://cyzy7r959.rtmphost.com/flowplayer',
// available bitrates for file names
bitrates: [40, 150, 400, 700, 1000],
// use a customized urlPattern for file names
urlPattern: '{0}-{1}',
// 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'
}
});
Take a look at a standalone version of this demo. View its source code to get things going on your page.