This is a message.

HD/SD toggle with HTTP Streaming

Providing an interface to choose between HD and SD with HTTP Streaming

standalone demo

This demo shows the integration of the HTTP Streaming plugin with the bitrate selection and f4m plugins.

We also configure the HD button to appear only in the controlbar and not in the dock.

More Information:


<!-- set up player container named "httpstreaming-hd" -->
<a class="player" id="httpstreaming-hd" style="display:block;width:660px;height:350px;"></a>



It is mandatory to configure the bitrates array in the clip configuration as the hd and sd boolean properties are not part of the F4m specification. The label properties have no effect in the above example and could be omitted. But they would be required to generate a bitrate menu with the Bitrateselect Javascript plugin or the Menu plugin.

bitrates: [
{bitrate: 500, label: '500k', sd: true},
{bitrate: 1500, label: '1500k', hd: true}


Here's the complete configuration for this demo:

flowplayer("httpstreaming-hd", "", {
plugins: {
f4m: { url: "flowplayer.f4m-3.2.10.swf" },
httpstreaming: { url: "flowplayer.httpstreaming-3.2.11.swf" },
// the "tube" skin
controls: { url: "flowplayer.controls-tube-3.2.16.swf"},
bitrateselect: {
url: "flowplayer.bitrateselect-3.2.14.swf",
// show the HD button only in the controlbar
hdButton: { place: 'controls'},
// show the selected file in a content box
// usually omitted in production
onStreamSwitchBegin: function (newItem, currentItem) {
$f("httpstreaming-hd").getPlugin('content').setHtml("Will switch to: " +
newItem.streamName + " from " + currentItem.streamName);
onStreamSwitch: function (newItem) {
$f("httpstreaming-hd").getPlugin('content').setHtml("Switched to: " +
// a content box to display the selected bitrate
// usually omitted in production
content: {
url: "flowplayer.content-3.2.9.swf",
bottom: 30,
left: 0,
width: 420,
height: 150,
backgroundColor: 'transparent',
backgroundGradient: 'none',
border: 0,
textDecoration: 'outline',
style: {
body: {
fontSize: 14,
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
clip: {
url: "sample2.f4m",
provider: 'httpstreaming',
// we need 2 urlResolvers
urlResolvers: ['f4m','bitrateselect'],
// directory where the manifest and video fragments are stored
baseUrl: "",
autoPlay: false,
// configuring the sd and hd properties is mandatory
bitrates: [
{bitrate: 500, label: '500k', sd: true},
{bitrate: 1500, label: '1500k', hd: true}