This is a message.

Toggle between HD and SD

Providing an interface to choose between HD and SD

standalone demo

The bitrate selection plugin offers a simple interface to toggle between High Definition and Standard Definition video. A HD button is presented to the user in the controlbar and another one on screen.

The switching information is shown in a splash screen on top of the video, but note that switching happens asynchronously and it takes a while before it is completed. You need to wait a bit after pressing the button. These delays happen because of client-server communication and because the previous stream data is first consumed from the buffer. Only then the data corresponding to the next bitrate can be processed and played.

HTML

<a
href="mp4:bbb-800"
style="display:block;width:480px;height:270px"
id="player">
</a>

HTML

Configuration

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

The JavaScript used for the above demo is shown below:

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
provider: 'rtmp',
autoPlay: false,
urlResolvers: 'brselect',
// preserve aspect ratios
scaling: 'fit',
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 }
]
},
plugins: {
brselect: {
url: "flowplayer.bitrateselect-3.2.14.swf",

// comment this out in production
onStreamSwitch: function (newItem) {
$f().getPlugin('content').setHtml("Switched to: " + newItem.streamName);
}
},
rtmp: {
url: "flowplayer.rtmp-3.2.13.swf",
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
},
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'
}
}
}
}
});

JavaScript

Note: By default the plugin selects the first item of the bitrates list at start of playback. Marking an item with isDefault: true select this item and also makes the splash screen appear at start.