This is a message.

Customizable HTML controls for bitrate selection

This plugin offers a convenient way to create custom HTML controls for bitrate selction. You can customize its look and feel using standard web techniques (HTML/CSS) and graphics (JPG/PNG/GIF).

Choose Video Bitrate:

Benefits

  • 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 select control can be skinned using standard HTML and CSS techniques, and graphics are supplied in a normal web format (JPG/PNG/GIF). Flash programming skills are not required at all.

  • The controls can be placed outside of the video player as well as positioned and sized in any way you like without any dependency on the video player's size and position on the page.

This plugin relies on the bitrate selection Flash plugin. The Flash plugin offers a simple HD/SD toggle solution which is enough in a lot of situations.

Dependency

This plugin requires the jQuery library to be loaded.

Usage

Next we will show you the code that produces the example shown above. If you want to view an example as a standalone page, you can find one here.

JavaScript coding

Our JavaScript configuration specifies the available bitrates and their corresponding filenames and labels. The label specified in the bitrates array is the one that is shown in the bitrate selection control.

Half of the code included here is just for demonstration purposes! Normally you don't need the content plugin or the onStreamSwitchBegin and onStreamSwitch functions - these are present here just to shown you how the bitrate selection works.

This plugin is dependent on jQuery and you need to include also the jQuery script in your page.

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

CSS coding

The plugin applies a CSS style to the currently selected bitrate. The demo here uses following simple CSS rule to show the selected bitrate:

.bitrate-selected {
border-style: dashed
}

CSS

Take a look at a standalone version of this demo. View its source code to get things going on your page.

Configuration

The plugin expands a HTML template to include the selection controls for each of the available bitrates. This demo uses the following HTML snippet as the container of the selection options.

All information needed to expand this template comes from the bitrates array defined in the player configuration (clip.bitrates). See above.

<div style="display:none;margin-top:12px">
<b>Choose Video Bitrate:</b> <br/> <br/>
 
<!--
The wrapper for the select options.
By default the plugin will use the contained element as a template.
It will clone it for each bitrate configured in the clip.
{bitrate} is replaced by a bitrate value and {label} is replaced
by the corresponding label.
-->
<div id="options">
<a href="{bitrate}">{label}&nbsp;&nbsp;</a>
</div>
</div>

HTML

The plugin takes two arguments. The first is the id of the container that will contain the select options. This can also be specified as a DOM element.

The second argument is an optional array of configuration options. The supported configuration options are as follows:

NameDefault ValueDescription

selectedBitrateClass

bitrate-selected

The class name of a CSS rule for the currently selected bitrate item.

pluginName

bitrateselect

The name used in the player configuration for the of bitrateselect Flash plugin. This plugin needs to access the Flash plugin and this is the name it uses in its lookup $f().getPlugin(pluginName).

templateId

None

The ID of the DOM element to be used as a HTML template for rendering the bitrate select options. By default the contents of the plugin container are used, i.e. the contents wrapped by the element identified by id that was given as the first argument to this plugin (see above). Specify this if you want to use a different element.

fadeTime

500

The duration of the fade-in animation used to bring the select options visible.

Download

flowplayer.bitrateselect-3.2.11.js

source code

flowplayer.bitrateselect-3.2.11.min.js

minified with Douglas Crockford's minifier

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

See the version history for this tool.

NOTE We are no longer providing packed scripts. Although they may have smaller file size they offer less performance than minified scripts. See details from JavaScript Library Loading Speed.

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.