|
FCPlayer How-tos |
IndexHow to add plugins to the menu bar.
|
|
In this tutorial, you will learn how to add plugins (options) to the menu bar. The menu bar is located directly below the player controls. It will not appear; however, unless you first load some plugins into it. There are a few standard plugins that come with the player, and it is even possible to create your own custom plugins.
The standard player plugins.
These are the default plugins that come with the player.
The bandwidth plugin (defaultBWPlugin)
This plugin allows your users choose their video bandwidth. You can deliver up to three different bandwidth levels, (low, medium, and high).
The video details plugin (defaultInfoPlugin)
This plugin allows you to include a drop down menu which displays information about the video being played.
The download plugin (defaultDownloadPlugin)
This plugin provides your users with links and options that enable them to download your videos.
The share plugin (defaultSharePlugin)
This plugin provides your users with a link to the current video, and gives them the embed code necessary to place the video on their own web pages.
The view plugin (viewMenu)
This plugin creates a menu that allows your users to toggle between 'fit to screen' and 'original size' video modes.
Loading plugins into the menu bar
There are two ways to set up the menu bar: Through the FCPlayer.play function or through the global configuration found in FCPlayerConfig.js. Plugins set up in FCPlayerConfig.js will be added to all videos. Plugins, that are only to be added to specific videos need to be set up in FCPlayer.play. Whenever you load your plugins in FCPlayer.play, you override any plugins loaded globally. We will first look at how you load your plugins into the menu bar using the FCPlayer.play function.
When you call FCPlayer.play, you can specify which plugins you want the player to display, as in the following example:
FCPlayer.play(
'null',
'null',
'myVideo.flv',
{
plugins:['defaultBWPlugin','defaultSharePlugin','defaultInfoPlugin','viewMenu']
}
)
The plugins option is an array (list) of plugin names that will be loaded into the menu bar.
The plugins will appear in the menu bar in the order specified.
Note carefully the syntax used. You must follow this syntax exactly.
1) The entire list of plugins is surrounded by square brackets.
2) Each plugin name is surrounded by single quotes.
3) A comma separates each plugin.
4) The plugin names are case sensitive.
Ok, but we're not done. You have created a list of plugins, but the player does not know what will go in them, yet.
Each of the standard plugins, exept for the view plugin, has a helper object associated with it. The helper object encapsulates the options and data that are to be used with the plugin. Here is our previous example, with the helper objects included:
FCPlayer.play(
'null',
'null',
'myVideo.flv',
{
plugins:['defaultBWPlugin','defaultSharePlugin','defaultInfoPlugin','viewMenu'],
BW:{
BWSwitch:'lh',
low:'myVideo.flv',
high:'myVideoBig.flv'
},
share:{
link:'http://www.mysite.com/videoplayer.html?vid=12345'
},
info:{
'Submitted by':'<a href=\'http://www.mysite.com?uid=123\' style=\'color:white\'>me</a>',
Title:'My Video',
Date:'Feb 16, 2009',
Views:'1',
Catagories:'<a href=\'http://www.mysite.com?cat=321\' style=\'color:white\'>My Video Collection</a> , <a href=\'http://www.mysite.com?cat=456\' style=\'color:white\'>Personal Videos</a>'
}
)
BW is the helper object for defaultBWPlugin
share is the helper object for defaultSharePlugin
info is the helper object for defaultInfoPlugin
download (not used above) is the helper object for defaultDownloadPlugin
Now let's take a closer look at each type of plugin.
The bandwidth plugin
Here is an example of a video using only the bandwidth plugin:
FCPlayer.play(
'null',
'null',
'myVideo.flv',
{
plugins:['defaultBWPlugin'],
BW:{
BWSwitch:'lmh',
low:'myVideo.flv',
med:'myVideoMedium.flv',
high:'myVideoBig.flv'
}
)
This video has three different bandwidth options, low, med, and high.
All options must end with a comma except the last one.
The parameters of the BW object are as follows:
BWSwitch (optional)
This option takes two values: 'lh' (low/high) and 'lmh' (low/medium/high)
It this parameter is absent, the mode will be assumed to be 'lh'
low (optional)
medium (optional)
high (optional)
These options specify the names of the low, medium, and high bandwidth video files.
If the low or high options are absent, the file names will be assumed to follow the naming convention: myvideolow.flv myvideomed.flv myvideohigh.flv.
Notice that all the options are optional. In fact, if you only want the low/high switch, and you name your videos: video1low.flv, video1high.flv, video2low.flv, video2high.flv, etc., you don't need to include the BW helper object.
The video details plugin
Here is an example of a video using only the video details plugin:
FCPlayer.play(
'null',
'null',
'myVideo.flv',
{
plugins:['defaultInfoPlugin'],
info:{
'Submitted by':'<a href=\'http://www.mysite.com?uid=123\' style=\'color:white\'>me</a>',
'Title':'My Video',
'Date':'Feb 16, 2009',
'Views':'1',
'Catagories':'<a href=\'http://www.mysite.com?cat=321\' style=\'color:white\'>My Video Collection</a> , <a href=\'http://www.mysite.com?cat=456\' style=\'color:white\'>Personal Videos</a>'
}
)
This video will contain a drop down menu which provides details about the video being played.
All options must end with a comma except the last one.
The info object doesn't take any standard parameters, instead, it takes a list of key/value pairs, which can basically be anything you want. Notice the second key/value pair:
Both the 'keys' and the 'values' should be surrounded by single quotes.
You can make up your own info like:
And, you can have as many different bits of info as you like.
The 'Catagories' field is a bit more complex, because we are including some HTML code.
'Catagories':'<a href=\'http://www.mysite.com?cat=321\' style=\'color:white\'>My Video Collection</a> , <a href=\'http://www.mysite.com?cat=456\' style=\'color:white\'>Personal Videos</a>'
Notice that any single quotes inside the value must be escaped, meaning that they must be preceded by a backslash, ie. \'. If you include double quotes in your values, you write them as the HTML special character "
The download plugin
Here is an example of a video using only the download plugin:
FCPlayer.play(
'null',
'null',
'myVideo.flv',
{
plugins:['defaultDownloadPlugin'],
download:{
'FLV':' <a href=\'http://www.mysite.com/vid.flv\' style=\'color:white\'>Download Now</a>',
'MP4':' <a href=\'http://www.mysite.com/vid.mp4\' style=\'color:white\'>Download Now</a>'
}
)
This video will contain a drop down menu which provides links to download the video in different formats (in this case flv and mp4).
All options must end with a comma except the last one.
The download object (like the info object) doesn't take any standard parameters, instead, it takes a list of key/value pairs, which can basically be anything you want. Also, you can include as many key/value pairs as you like.
Both the 'keys' and the 'values' should be surrounded by single quotes.
Take a look at the first key/value pair. Notice that we are including including some HTML code in the value field.
'FLV':' <a href=\'http://www.mysite.com/vid.flv\' style=\'color:white\'>Download Now</a>',
Any single quotes inside the value field must be escaped, meaning that they must be preceded by a backslash, ie. \'. If you include double quotes in your values, you write them as the HTML special character "
The share plugin
Here is an example of a video using only the share plugin:
FCPlayer.play(
'null',
'null',
'myVideo.flv',
{
plugins:['defaultSharePlugin'],
share:{
link:'http://www.mysite.com/videoplayer.html?vid=12345',
width:400,
width:300
}
)
This video will provide viewers with a means to link to it and embed it in their own web site.
All share options must end with a comma except the last one.
The parameters of the share object are as follows:
link (optional)
This option specifies the url that users can follow to play the current video. It is up to you to design a web page that will play a specific video, and then provide the link to it here.
The link option works together with the share.baseLink option in FCPlayerConfig.js.
share.baseLink + link = the full linking url.
Of course, the share.baseLink option is empty, by default. So here, as you can see above, the link option specifies the complete url.
If you omit the link option, no link will be provided.
width (optional)
The shared video width. This parameter will be added to the embed tag.
If a custom embed tag is being used, FCPlayer will replace any occurence of %width% within the tag with this value
This parameter overrides the share.width parameter in FCPlayerConfig.js.
height (optional)
The shared video height. This parameter will be added to the embed tag.
If a custom embed tag is being used, FCPlayer will replace any occurence of %height% within the tag with this value
This parameter overrides the share.height parameter in FCPlayerConfig.js.
allowEmbedded (optional)
The values this option takes are (true/false)
If false, no embed code will be given.
This parameter overrides the share.allowEmbedded parameter in FCPlayerConfig.js.
useCustomEmbedTag (optional)
The values this option takes are (true/false)
If this option is true, the embed tag will be generated from the share.customEmbedTag variable found in FCPlayerConfig.js
This parameter overrides the share.useCustomEmbedTag parameter in FCPlayerConfig.js.
customEmbedURL (optional)
An embed tag parameter which can be supplied to the FCPlayer. FCPlayer will replace any occurence of %url% within the custom embed tag with this value
This parameter overrides the share.customEmbedURL parameter in FCPlayerConfig.js.
customEmbedID (optional)
An embed tag parameter which can be supplied to the FCPlayer. FCPlayer will replace any occurence of %id% within the custom embed tag with this value
This parameter overrides the share.customEmbedID parameter in FCPlayerConfig.js.
Addition information on video sharing and using the share plugin can be found in, how to Enable your videos to be shared with other sites.
Loading Plugins Globally
If you want certain plugins to be used with all videos, without having to load them in each play call, you can load your plugins into the menu bar from the FCPlayer/config/FCPlayerConfig.js file.
Open the FCPlayerConfig.js file with a text editor and find the following lines:
//Default plugins
plugins:null,
Then, fill in the plugins you want to use, for example:
//Default plugins
plugins:['defaultInfoPlugin','viewMenu'],
You will still need to include the helper objects in each play call.
Also, remember that if you load the plugins in a play call, you will override the plugins specified in FCPlayerConfig.js.
|
|
|
| |
