Dynamic quality of service monitoring and stream switching Streaming Extensions - Demo 2 / 13
Introduction
This example demonstrates the bandwidth detection plugin with with the Wowza server. It does dynamic stream switching - The bandwidth is monitored during playback and streams are switched on-the-fly if the available bandwidth fluctuates.
The plugin is aware of the available screen size and never uses a stream that is too large to fit the screen dimensions. It will switch to a larger video when the fullscreen mode is entered (if there is enough available bandwidth to use a large size video).
HTML coding
<a
href="bbb_480x270"
style="display:block;width:480px;height:270px"
id="player">
</a>Flowplayer configuration
The configuration is shown below. Here we use a content plugin to display the selected video stream. In a production environment you would not need that.
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
clip: {
urlResolvers: 'bwcheck',
provider: 'rtmp',
autoPlay: false,
scaling: 'fit',
// available bitrates and the corresponding files. We specify also the video width
// here, so that the player does not use a too large file. It switches to a
// file/stream with larger dimensions when going fullscreen if the available bandwidth permits.
bitrates: [
{
url: "mp4:vod/demo.flowplayervod/bbb-800.mp4", width: 480, height: 180, bitrate: 800,
// this is the default bitrate, the playback kicks off with this and after that
// Quality Of Service monitoring adjusts to the most appropriate bitrate
isDefault: true
},
{ url: "mp4:vod/demo.flowplayervod/bbb-1200.mp4", width: 720, bitrate: 1200 },
{ url: "mp4:vod/demo.flowplayervod/bbb-1600.mp4", width: 1080, bitrate: 1600 }
]
},
plugins: {
// bandwidth check plugin
bwcheck: {
url: 'flowplayer.bwcheck-3.2.5.swf',
// HDDN uses Wowza servers
serverType: 'wowza',
// we use dynamic switching, the appropriate bitrate is switched on the fly
dynamic: true,
netConnectionUrl: 'rtmp://rtmp01.hddn.com/play',
// show the selected file in the content box. This is not used in real installations.
onStreamSwitchBegin: function (newItem, currentItem) {
$f().getPlugin('content').setHtml("Will switch to: " + newItem.streamName +
" from " + currentItem.streamName);
},
onStreamSwitch: function (newItem) {
$f().getPlugin('content').setHtml("Switched to: " + newItem.streamName);
}
},
// RTMP streaming plugin
rtmp: {
url: 'flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://rtmp01.hddn.com/play'
},
// a content box so that we can see the selected bitrate. This is not normally
// used in real installations.
content: {
url: 'flowplayer.content-3.2.0.swf',
top: 0, left: 0, width: 400, height: 150,
backgroundColor: 'transparent', backgroundGradient: 'none', border: 0,
textDecoration: 'outline',
style: {
body: {
fontSize: 14,
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
}
}
}
}
});You need to have different movie file for each bandwidth. This configuration uses following files
- bbb-800.mp4
- bbb-1200.mp4
- bbb-1600.mp4