Let the user select the bitrate Streaming Extensions - Demo 3 / 13
Introduction
Here we use a button in the controlbar that let's the user select between HD (high definition) and SD (standard definition) quality.
The switching information is shown 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 are there because of client-server communication and because the previous stream data is first consumed from the buffer and only after that data corresponding to the next bitrate gets played and shown.
HTML coding
<a
href="mp4:bbb-800"
style="display:block;width:480px;height:270px"
id="player">
</a>Flowplayer configuration
The configuration is shown below. The hdButton: true option enables the HD selection button. The button is shown in the controlbar.
There's also a JavaScript plugin available to generate the stream selection links that are shown below the player. This JavaScript plugin is contained in the plugin source distribution package.
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
clip: {
provider: 'rtmp',
autoPlay: false,
urlResolvers: 'bwcheck',
// preserve aspect ratios
scaling: 'fit',
bitrates: [
// standard definition
{ url: "mp4:bbb-800", width: 480, bitrate: 800, normal: true, isDefault: true },
// HD
{ url: "mp4:bbb-1600", width: 1080, bitrate: 1600, hd: true }
]
},
onBegin: function() {
console.log("onBegin");
},
onBeforeBegin: function() {
console.log("onBeforeBegin");
},
onStart: function() {
console.log("onStart");
},
plugins: {
// bandwidth check plugin
bwcheck: {
url: 'flowplayer.bwcheck-3.2.5.swf',
// enable the HD toggle button
hdButton: true,
// Cloudfront uses FMS servers
serverType: 'fms',
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st',
// show the selected file in the content box. This is not used in real installations.
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.3.swf',
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
},
// a content box so that we can see the selected bitrate. This is not normally
// used in real installations.
content: {
url: 'flowplayer.content-3.2.0.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'
}
}
}
}
});Docking the buttons
You can also show the HD button in the 'dock'. The Viral Videos plugin and the Sharing plugin also use the dock for their buttons. You can have all these buttons sitting nicely in the dock if you use these plugins in combination. The example below uses the Sharing plugin and the HD button.
HTML coding
<a
href="mp4:bbb-800"
style="display:block;width:480px;height:270px"
id="player-dock">
</a>Flowplayer configuration
The configuration is shown below. hdButton: 'dock' option places the button into the dock.
flowplayer("player-dock", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
log: { level: 'debug', filter: 'org.flowplayer.bwcheck.*, org.osmf.net.*' },
clip: {
provider: 'rtmp',
autoPlay: false,
urlResolvers: 'bwcheck',
// preserve aspect ratios
scaling: 'fit',
bitrates: [
// standard definition
{ url: "mp4:bbb-800", width: 480, bitrate: 800, normal: true, isDefault: true },
// HD
{ url: "mp4:bbb-1600", width: 1080, bitrate: 1600, hd: true }
]
},
onBegin: function() {
console.log("onBegin");
},
onBeforeBegin: function() {
console.log("onBeforeBegin");
},
onStart: function() {
console.log("onStart");
},
plugins: {
// sharing plugin
sharing: {
url: 'flowplayer.sharing-3.2.1.swf',
facebook: false
},
// bandwidth check plugin
bwcheck: {
url: 'flowplayer.bwcheck-3.2.5.swf',
// have the HD button in the dock
hdButton: 'dock',
// Cloudfront uses FMS servers
serverType: 'fms',
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st',
// show the selected file in the content box. This is not used in real installations.
onStreamSwitchBegin: function (newItem, currentItem) {
console.log("Will switch to: " + newItem.streamName +
" from " + currentItem.streamName);
$f('player-dock').getPlugin('content').setHtml("Will switch to: " + newItem.streamName +
" from " + currentItem.streamName);
},
onStreamSwitch: function (newItem) {
console.log("Switched to: " + newItem.streamName);
$f('player-dock').getPlugin('content').setHtml("Switched to: " + newItem.streamName);
}
},
// RTMP streaming plugin
rtmp: {
url: 'flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
},
// a content box so that we can see the selected bitrate. This is not normally
// used in real installations.
content: {
url: 'flowplayer.content-3.2.0.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'
}
}
}
}
});