This is a message.

Menu plugin

The menu plugin set up to show related videos

standalone demo

This demo is prepared to show a list of related videos once the current content video finishes. These related videos are shown using the menu plugin, and you can click any of the menu items making the corresponding video to play.

Additionally the player is set up with the sharing plugin offering to share the video to friends using email or twitter.

Configuration

See below for the configuration and scripting that is used in this demo.

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
clip: {
autoPlay: false,
baseUrl: 'http://edge.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