This is a message.

Docking buttons to interface plugins

Make plugins interact with the user by offering buttons in the Dock

standalone demo

The Bitrate Selection, Sharing and Viral Videos plugins can interact with your audience via buttons which are placed in the Dock. The dock is a container which floats on top of the video screen.

When you use some of the plugins in combination the buttons are arranged nicely. This demo shows the Dock interface for the Sharing and Bitrate Selection plugins together.

HTML

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

HTML

Configuration

Although not a plugin its own right and only used by other plugins, the dock is configured like a plugin in the plugins section.

Specifying hdButton: 'dock' for the the Bitrate Selection plugin places its HD button in the dock only.

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: [
{ url: "mp4:bbb-800", bitrate: 800, sd: true, isDefault: true },
{ url: "mp4:bbb-1600", bitrate: 1600, hd: true }
]
},
plugins: {
// dock used by the sharing and bitrate select plugins
dock: {
// arrange buttons horizontally
horizontal: true,
 
// increase gap between buttons
gap: 10,
 
// show the dock longer
mouseOutDelay: 1000
},
 
// the sharing plugin will also use the dock for its buttons
sharing: {
url: "flowplayer.sharing-3.2.15.swf",
facebook: false
},
brselect: {
url: "flowplayer.bitrateselect-3.2.14.swf",
 
// show the HD button in the dock only
hdButton: 'dock'
},
rtmp: {
url: "flowplayer.rtmp-3.2.13.swf",
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
}
}
});

JavaScript