This is a message.

Monitoring service quality

Dynamic quality of service monitoring and stream switching

standalone demo

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 bandwidth permits).

HTML

<a
href="bbb_480x270"
style="display:block;width:480px;height:270px"
id="player">
</a>

HTML

Configuration

The configuration is shown below. Note that we use the content plugin to display the selected video stream for demonstration purposes only; it is not required.

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.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.flowplayer/bbb-800.mp4",
width: 480, 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.flowplayer/bbb-1200.mp4", width: 720, bitrate: 1200 },
{ url: "mp4:vod/demo.flowplayer/bbb-1600.mp4", width: 1080, bitrate: 1600 }
]
},
plugins: {
// bandwidth check plugin
bwcheck: {
url: "flowplayer.bwcheck-3.2.13.swf",
 
// HDDN uses Wowza servers
serverType: 'wowza',
 
// we use dynamic switching, the appropriate bitrate is switched on the fly
dynamic: true,
 
netConnectionUrl: 'rtmp://r.demo.flowplayer.netdna-cdn.com/play',
 
// show the selected file in the content box. This is not used in real
// installations.
onStreamSwitchBegin: function(newItem, currentItem) {
this.getPlayer().getPlugin('content').setHtml(
"Will switch to: " + newItem.streamName +
" from " + currentItem.streamName);
},
onStreamSwitch: function(newItem) {
this.getPlayer().getPlugin('content').setHtml(
"Switched to: " + newItem.streamName);
}
},
 
// RTMP streaming plugin
rtmp: {
url: "flowplayer.rtmp-3.2.13.swf",
netConnectionUrl: 'rtmp://r.demo.flowplayer.netdna-cdn.com/play'
},
 
// a content box so that we can see the selected item
// usually omitted in production
content: {
url: "flowplayer.content-3.2.9.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'
}
}
} }
});

JavaScript