This is a message.

Let the users select the bitrate

The bitrate selection plugin offers a toggle button to select between High Definition (HD) and Standard Definition (SD) video. In addition to this it makes it possible offer a wider range of bitrates for the users to choose from.


  • The user is in complete control over bitrate selection. The player does not do any bandwidth detection or any automatic bitrate switching. This way the user stays in control and knows what goes on.

  • The HD/SD toggle is easy to set up and requires only two different bitrates to be encoded.

  • Integrates with the JavaScript bitrate selection plugin or the Menu plugin if you are looking for more flexibility than the HD/SD toggle.


Bitrate items

The plugin provides an additional clip property: bitrates. It contains the list of clips at different bitrates from which the user can choose. These bitrate items in turn contain special properties which are communicated by the plugin to the selection interface of your choice.

Here we configure two bitrate items for the HD button and splash screen interface which comes with the plugin itself and is used in the above example. The plugin will choose the first item in this list as the SD clip and the second item as the HD clip.

clip: {
bitrates: [
// use the 800 kbps item by default, the SD item, marked with sd: true
{ url: "mp4:bbb-800", bitrate: 800, sd: true, isDefault: true },
// this is the HD item, marked with hd: true
{ url: "mp4:bbb-1600", bitrate: 1600, hd: true }


The properties of the bitrate items are as follows:



mandatory - unless given in external manifest, RSS or smil

URL of this clip.



Average bitrate of this clip in kilobits per second (bits per second in smil files).



The name used to look up the controlbar plugin where the menu button is placed. You should change this if you configure the controlbar under any other name than 'controls'.


mandatory for HD/SD toggle

Set this clip as the video in standard definition. Enables HD button and splash screen.


mandatory for HD/SD toggle

Set this clip as the video in high definition. Enables HD button and splash screen.


mandatory for selecting from more than 2 bitrates

Sets the label for the bitrate item. Used by the Bitrateselect JavaScript plugin or the Menu plugin.



Set the clip as default to play on startup. Defaults to the first clip in the bitrates array. If no item is explictly marked as default the HD/SD toggle splash screen will not appear at the beginning of playback.

HD button and Splash screen

If offer your audience the choice between two bitrates via the hd and sd properties of the clip's bitrates array, the user toggles between SD and HD by clicking on a button. The HD button can be configured in various ways.

To make the HD button show up in the dock only:

hdButton: {
place: 'dock'


Shorthand notation for the above: hdButton: 'dock'.

To make the button show up in the controlbar only:

hdButton: {
place: 'controls'


Shorthand notation for the above: hdButton: 'controls'.

The splash screen which informs the audience which choice they made can be customized too:

hdButton: {
// custom labels for the HD splash
splash: {
onLabel: 'enabled',
offLabel: 'disabled'


The hdButton object accepts the following properties:




Where to display the HD button: controls shows it in the controlbar, dock shows it in the dock, both shows it both in the dock and in the controlbar.


{'width': '50%', 'offLabel': 'IS OFF', 'top': '50%', 'left': '50%', 'onLabel': 'IS ON', 'height': '50%'}

Properties for the "HD IS ON" / "HD IS OFF" splash that is briefly displayed when the user toggles between HD on and off. The splash is shown on top of the video area.

This object accepts all display properties. The default display properties used with the splash are {left: '50%', top: '50%', width: '50%', height: '50%'}. This sets the splash centered in the player and taking 50% of its horizontal and vertical space.

To disable the splash completely use splash: false.

onLabel sets the label text shown below the HD symbol when HD is enabled. Default: 'IS ON'.

offLabelsets the label text shown below the HD symbol when HD is disabled. Default: 'IS OFF'.


If you place the hdButton in the dock you can configure the dock like a plugin with the following properties:

PropertyDefault ValueDescription



the spacing between buttons in the dock



Display the dock buttons aligned horizontally?

The dock also supports all the standard plugin display properties. However, changing these properties at runtime using the css() API plugin method is not supported. The remaining plugin methods work only if automatic hiding of the dock is completely disabled, see below.

Automatic hiding of the dock

The automatic hiding of the dock can be controlled using the following properties:

PropertyDefault ValueDescription



Set this to false if you do not want the plugin to autohide at all. See also the autohide shorthand syntax.



Set this to true if you want the plugin to autohide only in fullscreen mode. See also the 'fullscreen' autohide shorthand syntax.



The delay in milliseconds before the plugin is automatically hidden. The timer starts over again when the user stops moving the mouse or moves the mouse out of the player. Specifying 0 here causes the plugin to hide immediately. The default is 4000 (4 seconds).



The duration it takes for the plugin to go completely hidden. This controls the speed of the hiding animation.



The plugin hides after mouse has been moved out of the player area. This property specifies the delay between the time mouse is moved out of the player area and the time when hiding starts.

Here is an example configuration to change some of these properties. This example is for the Viral Videos plugin, but it also applies to the Controlbar, Sharing and Bitrate Selection plugins.

$f("player", "", {
plugins: {
viral: {
url: "flowplayer.viralvideos-3.2.14.swf"
dock: {
gap: 5,
autoHide: {
// enable in fullscreen mode only
fullscreenOnly: true,
// make it hide faster
hideDelay: 2000


autoHide shorthands

There is some convenience syntax as well. For example you can supply a boolean value:

// disable autohiding completely
autoHide: false


You can also supply a string value, one of 'always', 'fullscreen', 'never':

// enable autohiding in fullscreen
autoHide: 'fullscreen'


JavaScript API





Changes the stream to the specified bitrate. The specified value should be one of the values contained in the bitrates array. If the player is currently playing a clip, the stream corresponding to the specified bitrate is started.


EventWhen does it fire?

onStreamSwitchBegin(newItem, currentItem)

Fires when a bitrate switch is initiated. A second event is fired when the switch is completed, see below. The callback is fed with two bitrateItem objects that describe the new bitrate we are switching to and the current one. These objects have the following properties:

  • streamName - the name of the stream
  • bitrate


Fires when the bitrate switch has been completed. Once fired the new stream starts playing and is shown in the player. The callback is fed with an object argument that has the following properties:

  • streamName - the name of the stream
  • bitrate



just the working flash file to get you going

working flash file (swf) + README.txt and LICENSE.txt

source code

Please right-click and choose "Save link as..." (or similar)

Note: For XSS security reasons Flash plugins must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.

This is a Flash plugin, and its features are therefore not available on iOS. For iOS please consult the ipad plugin.

See the version history for this tool.

Found a bug?

If you encounter problems with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.