Customizable HTML controls for bitrate selection
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.
This plugin requires the jQuery library to be loaded.
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.
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
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.
The plugin applies a CSS style to the currently selected bitrate. The demo here uses following simple CSS rule to show the selected bitrate:
Take a look at a standalone version of this demo. View its source code to get things going on your page.
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
defined in the player configuration (
clip.bitrates). See above.
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:
The class name of a CSS rule for the currently selected bitrate item.
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
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
The duration of the fade-in animation used to bring the select options visible.
minified with Douglas Crockford's minifier
Please right-click and choose "Save link as..." (or similar)
See the version history for this tool.
Found a bug?