Switch between streams during playback Advanced streaming plugins - Demo 3 / 10
Introduction
The bwcheck plugin can switch streams even during the playback! What this means that user is always served with the best possible video quality without any gaps in the playback. Click on the image to view a demo. You can manually change the bitrate from the select box and the playback will seamlessly switch to the appropriate stream. Note that this feature is only supported by Flash 10 and above. For lower Flash versions the playback will start from the beginning when stream is switched.
Switch bitrates manually using the selector below. Note that manual selection disables dynamic bitrate adaptation.
Use these to enable and disable dynamic switching:
This feature requires server side support and at the moment only Adobe Flash Media Server can handle it. The video is hosted on Influxis service which offers Flash Media Server hosting.
You can see the differences most clearly when viewing the video in fullscreen. The class and it's shadows have checkered edges in low bitrates. There's also a difference in the sound of the music.
HTML coding
Again we have the player container and the info box.
<a
href="skyandice"
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" style="padding-right:0px">
Click on the splash above. Flash 10 is required.
</div>Flowplayer configuration
Again we use two plugins: RTMP plugin and the bandwidth check plugin. The configuration is identical to previous demo with one exception. We have enabled a dynamic configuration property.
// version 10 is required
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf", {
// configure Safari and Firebug consoles to show degug logging. Check it out to see how
// dynamic bitrate adaptation works!
log: { level: 'debug', filter: 'org.flowplayer.bwcheck.*' },
// configure our 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',
// we use dynamic switching
dynamic: true,
// Use this connection for bandwidth detection
netConnectionUrl: 'rtmp://cyzy7r959.rtmphost.com/flowplayer',
// available bitrates for file names
bitrates: [150, 400, 700, 1000],
// use a customized urlPattern for file names
urlPattern: '{0}-{1}',
// this method is called when bandwidth check is done
onBwDone: function(url, chosenBitrate, bitrate) {
var el = document.getElementById("info");
el.innerHTML = "Your speed is: " +bitrate+ "<br />Video file: " +url;
},
// called when stream is switched dynamically
onStreamSwitch: function(bitrate, newUrl, oldUrl) {
var el = document.getElementById("info");
el.innerHTML = "Switched to stream: " + newUrl + "<br />current bitrate: " + bitrate;
}
}
},
// configure clip to use "rtmp" plugin for providing video data
// and the "bwcheck" plugin to resolve clip URLs
clip: {
provider: 'rtmp',
// use bwcheckek for all clips
urlResolvers: 'bwcheck'
}
});Bitrate selector
Here is the coding for the bitrate selector. It uses setBitrate method on the bwcheck JavaScript API.
// uses jQuery for binding a change event to a SELECT box
$("#switcher").change(function() {
// get selected bitrate
var bitrate = $(this).val();
// if player is loaded and bitrate is a positive integer ..
if ($f().isLoaded() && bitrate > 0) {
// go on and change the bitrate dynamically
$f().getPlugin("bwcheck").setBitrate(bitrate);
}
});