This is a message.

A fully scriptable and configurable menu for multiple purposes

Use the menu plugin for displaying playlists, lists of related videos or bitrate options inside Flowplayer.

Features and benefits

  • Off-the-shelf support for bitrate selection
  • Full JavaScript and ActionScript APIs. Execute your own code when items are selected
  • Use for playlists
  • Use to show related videos

Configuration

Here is the configuration and scripting used in the demo shown above. See how the JavaScript onSelect event is used to play a video corresponding the selected menu item.

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
clip: {
autoPlay: false,
baseUrl: 'http://stream.flowplayer.org',
 
onStart: function() {
// reset things for normal video playback
$f().getPlugin("menu").fadeOut();
$f().getPlugin("dock").fadeOut();
$f().getPlugin("play").css({ height: '22%' });
$f().reset();
},
 
onBeforeFinish: function() {
// return false so that it displays "Play again" after the playlist clip finishes
return false;
},
 
onFinish: function() {
// display the menu and the dock with sharing options
$f().getPlugin("menu").fadeIn();
$f().getPlugin("dock").fadeIn();
 
// make the play button larger
$f().getPlugin("play").css({ height: 60 });
 
// resize the video screen into top-left corner of the player canvas
$f().getScreen().animate({ left: 10, top: 10, width: 250, height: 150 })
}
},
 
// a playlist which is controlled by the menu plugin (see below)
playlist: [
'KimAronson-TwentySeconds59483.flv',
'KimAronson-TwentySeconds58192.flv',
'KimAronson-TwentySeconds63617.flv',
'KimAronson-TwentySeconds1318.flv',
'KimAronson-TwentySeconds70930.flv',
'KimAronson-TwentySeconds4461.flv'
],
plugins: {
 
// the menu plugin that shows related videos,
// the actual video files are specified in the playlist (see above)
menu: {
url: "flowplayer.menu-3.2.13.swf",
 
// the menu items have indexes that correspond to playlist entries
items: [
{ label: '<b>first clip</b><br/><i>3:30</i>',
imageUrl: '/media/img/demos/thumb1.jpg', index: 0 },
{ label: 'second clip',
imageUrl: '/media/img/demos/thumb2.jpg', index: 1 },
{ label: '<b>third clip</b><br/><i>3:66</i>',
imageUrl: '/media/img/demos/thumb3.jpg', index: 2 },
{ label: 'fourth clip',
imageUrl: '/media/img/demos/thumb4.jpg', index: 3 },
{ label: '<b>fifth clip</b><br/><i>13:30</i>',
imageUrl: '/media/img/demos/thumb5.jpg', index: 4 },
{ label: 'sixth clip',
imageUrl: '/media/img/demos/thumb1.jpg', index: 5 }
],
 
// set the height for menu items
menuItem: {
height: 70
},
 
scrollable: true, // display scroll buttons
right: 10,
height: 264,
width: 220,
 
/
* onSelect() is called when the user selects an item from the menu
/
onSelect: function(item) {
// play the video corresponding to the selected menu item's index
if (item.index >= 0) {
$f().play(item.index);
}
}
},
// the sharing plugin (email, embed, facebook, twitter)
share: {
url: "flowplayer.sharing-3.2.15.swf",
buttons: {
overColor: 'rgba(255,10,10,0.5)'
},
// this demo relies heavily on events provided by the api
// therefore disable embedding without api and video sharing on facebook
embed: false,
facebook: false
},
// placement, dimension and other properties of the
// sharing buttons that are shown in the dock
dock: {
display: 'none',
left: 10,
top: 170,
height: 59,
autoHide: false,
overColor: '#'
},
controls: {
tooltips: { buttons: true }
}
}
});

JavaScript

Here are the available configuration options.

PropertyDefault ValueDescription

button

{'color': 'rgba(140,142,140,1)', 'fontColor': 'rgb(255,255,255)', 'disabledColor': '#555555', 'enabled': True, 'overColor': 'rgba(140,142,140,1)'}

The properties for the controlbar button that is used to make the menu visible.

controlsPlugin

controls

The name used to look up the controlbar plugin where the menu button is placed. You should change this if you configure the controlbar under any other name than 'controls'.

items

null

A list of menu items. See below for details on supported menu item properties.

itemsUrl

null

An URL pointing to a JSON file with menu items in it. See below for details on supported menu item properties.

menuItem

{'color': 'rgba(255,255,255,1)', 'fontColor': 'rgb(0,0,0)', 'disabledColor': 'rgba(150,150,150,1)', 'enabled': True, 'overColor': 'rgba(1,95,213,1)'}

The styling properties to be used for menu items. These can be overridden for each menu item, see below.

scrollButtons

{'disabledColor': '#555555', 'backgroundColor': 'transparent', 'overColor': '#ffffff', 'borderRadius': '0', 'border': '0px', 'enabled': True, 'color': '#ffffff'}

The properties for the scroll buttons. Used width scrollable: true. See below for more information on the properties.

scrollable

 

Set this to true to enable scroll buttons and vertical scrolling of menu items.

Menu items

The menu items supplied with the items property can have the following properties:

PropertyDefault ValueDescription

label

 

The label text to be used for this menu item.

height

30

The height of this menu item.

enabled

True

Is this item enabled? If false, it cannot be selected and is displayed in the disabledColor.

toggle

False

Is this a toggle item? Toggle items can be selected and de-selected. In the selected state a check mark is displayed next to the label text.

group

None

The name of the toggle group this item belongs to. Used with toggle: true. Groups are used to group toggle items together, so that only one item in the group is selected at any time. When an item in a toggle group is selected, the previously toggled item in the group is de-selected. A selected item in a toggle group is also disabled and the enabled state is toggled when selecting a different item in the group (radio button behaviour).

selected

False

Is this item initially selected? Used with toggle: true. Only one item in a group should be set to true.

imageUrl

None

An URL to an image that is loaded and shown in this menu item.

The items can also contain custom properties of your choosing. These custom properties are all propagated to the onSelected(item) event listener function, where you can access them.

You can also give use itemsUrl property if you want so load the menu items from a server. With this the player attempts to load a file from this URL and expects to receive a JSON formatted file with menu items. There is also a loadItems(itemsUrl) method available in the scripting API.

Here is an example of a file containing JSON formatted list of menu items. The items in the list can contain any of the item properties listed above.

[
{ "label": "first item", "enabled": false },
{ "label": "second item" },
{ "label": "third item", "enabled": false },
{ "label": "fourth item" }
]

JavaScript

Properties for the menu button, menu items and scroll buttons

The following options can be used in the button configuration object to modify the button that brings the menu visible. The same properties also apply to the menuItem and scrollButtons configuration objects.

PropertyDefault ValueDescription

color

rgba(140,142,140,1)

Color of the buttons in normal state.

overColor

rgba(140,142,140,1)

Color of the buttons in mouse over state.

fontColor

rgb(255,255,255)

Color used for the button label text.

lineColor

rgb(255,255,255)

Color of the button border lines and for the close button X-symbol.

Scroll buttons

You can enable vertical scrolling of menu items by adding scrollable: true to the plugin's configuration. With this the plugin displays buttons that can be used to scroll the menu items up and down.

Styling Properties can be used to change the appearance of the buttons' background. All styling properties listed here except backgroundImage and display can be used.

The default backgroundGradient value for the up scroll button is [.10, .21, .6] and for the down scroll button [.6, .21, .10]. Here is an example that shows how to remove the gradient completely and change the color of the icons:

plugins: {
// the menu plugin
menu: {
scrollButtons: {
// disable background gradient
backgroundGradient: 'none'
 
// make the up/down arrow icons red
color: '#ff0000'
}
}
}

JavaScript

You have two sets of properties you can use to tweak the appearance of the scroll buttons:

Scripting

The following methods are available for scripting with JavaScript.

MethodReturnsExampleDescription

addItems(items)

int, the new length of the menu

addItems([
    { label: 'click me' },
    { label: 'bonus gift',
        enabled: false } ]);

Adds items to the menu. items is a list of menu items to be added.

addItem(item, adjustPosition = true)

int, the new length of the menu

addItem(
    { label: 'click me' });

Adds an item to the menu. item is the item to be added. adjustPosition specifies whether the menu's position in relation to the menu button should be adjusted based on the new height of the menu. If you are adding multiple items with repeated addItem calls you should pass false in adjustPosition with all calls except the last one in the series of calls.

enableItems()

plugin object

enableItems(false);

Toggles enabled state of all menu items according to boolean argument which defaults to true.

getLength()

int

getLength();

Returns number of menu items.

loadItems(url)

int, the new length of the menu

loadItems(
    '/path/to/items.json');

Loads menu items specified in a JSON-formatted file located at url.

removeItems()

int, the new length of the menu

removeItems([0, 3, 4]);

Removes menu items specified in an array of indexes. If no argument is given, removes all items.

Events

An onSelect event is fired when a menu item is selected. In the demo shown in top of this page uses the following code to handle this event:

onSelect: function(item) {
// play the video corresponding to the selected menu item's index
// the 'index' is the position of the item in the item array
if (item.index >= 0) {
$f().play(item.index);
}
}

JavaScript

Bitrate selection menu

You can use the menu for bitrate selection. This demo shows the bitrate menu in action.

Download

Get the latest version of the Menu plugin.

flowplayer.menu-3.2.13.swf

just the working flash file to get you going

flowplayer.menu-3.2.13.zip

working flash file (swf) + README.txt and LICENSE.txt

flowplayer.menu-3.2.13-src.zip

source code

Please right-click and choose "Save link as..." (or similar)

Note: For XSS security reasons Flash plugins must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.

This is a Flash plugin, and its features are therefore not available on iOS. For iOS please consult the ipad plugin.

See the version history for this tool.

Found a bug?

If you encounter problems with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.