This is a message.

Use a menu for bitrate selection

Using the menu plugin for user driven bitrate selection

standalone demo

The Menu plugin can be used for bitrate selection. The menu looks up the available bitrates and shows them in a simple menu. An additional menu button is shown in the controlbar.

HTML

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

HTML

Configuration

The configuration is simple: You need the plugin in the configuration and also the bitrates defined in the clip.

The javascript used for the above demo is shown below:

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
autoPlay: false,
provider: 'rtmp',
 
// urlResolvers is needed here to point to the bitrate select plugin
urlResolvers: 'brselect',

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: {
menu: {
url: "flowplayer.menu-3.2.13.swf",
items: [
// you can have an optional label as the first item
// the bitrate specific items are filled here based on the clip's bitrates
{ label: "select bitrate:", enabled: false }
]
},
brselect: {
url: "flowplayer.bitrateselect-3.2.14.swf",
 
// enable the bitrate menu
menu: true,
 
// 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'
}
}
},
controls: {
tooltips: { buttons: true }
}
}
});

JavaScript