This is a message.

User driven bitrate selection

Allow users to choose the bitrate

standalone demo
Choose Video Bitrate:

This demo shows the bitrate selection plugins in action. It uses JavaScript plugin to render bitrate selection controls. The controls show up when you hit play in the player shown above. The actual bitrate switching is handled by the Flash plugin.

HTML

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

HTML

Configuration

The configuration is shown below. We use a JavaScript plugin to generate the stream selection links that are shown below the player. This JavaScript plugin is contained in the plugin source distribution package.

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
provider: 'rtmp',
autoPlay: false,
urlResolvers: 'bitrateselect',
 
// preserve aspect ratios
scaling: 'fit',
 
// the available bitrates. Note the labels, those are used in
// the HTML select options!
bitrates: [
{ url: "mp4:bbb-800",
bitrate: 800, isDefault: true,
// label used to populate the selection items
label: "800 k"
},
{ url: "mp4:bbb-1200",
bitrate: 1200, label: "1200 k" },
 
{ url: "mp4:bbb-1600",
bitrate: 1600, label: "1600 k" }
]
},
 
plugins: {
bitrateselect: {
url: "flowplayer.bitrateselect-3.2.14.swf",
 
// don't use the HD toggle button or the HD notification splash
hdButton: {
place: 'none',
splash: false
},
 
// show the selected file in the content box. These functions are
// here just for demonstartion purposes.
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.13.swf",
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
},
 
// a content box so that we can see the selected bitrate. (for demonstation
// purposes only)
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'
}
}
}
}
}).bitrateselect('#options');

JavaScript