This tutorial is for those of you who are interested in creating custom menu bar plugins for the player. Here we present, for you, the contents of FCPlayer/plugins/exampleplugins.js, which contains two ready made examples. When you create your own plugins, you will add them to the customplugins.js file. Developers who have further technical questions may also contact us at support@fastcatsoftware.com.
/*******************************************************************************
* Plugin Rules-
*
* Attach all your functions to the FCPlayer object (ex. FCPlayer.myFunction)
*
* Append the variable '_id' to all id attributes in your HTML (ex. if you want
* an element to have the attribute id='elem1', you will code it like this:
* id='elem1"+_id+"' )
*
* Append the variable '_id' to all calls to FCPlayer in your HTML. (ex. if you
* want to call the FCPlayer pause function from the onclick event, you will
* code this: onclick='FCPlayer"+_id+".pause()' )
******************************************************************************/
( function() {
var _id = _fcp_instance;
var FCPlayer = window["FCPlayer" + _id];
/*
* =================================================================================
* Example 1: A simple plugin that displays movie views.
* =================================================================================
*/
/***************************************************************************
* myViewsPlugin - A user defined function which returns your plugin's HTML
* content.
*
* Arguments: none
* Returns: A string containing the HTML for your plugin.
**************************************************************************/
FCPlayer.myViewsPlugin = function() {
return "<span style='font-family:arial;font-size:9px;color:white'>Views: "
+ FCPlayer.getMyViews() + "</span>";
}
/***************************************************************************
* getMyViews - A user defined function which returns the number of current
* views.
*
* Arguments: none
* Returns: The number of current views.
**************************************************************************/
FCPlayer.getMyViews = function() {
//Example implementation with jQuery ajax
//Here you would need to pass a videoId property and an initial
//views property in the options argument of FCPlayer.play()
/*
var url = "getAndIncrementViews.php?Id" + FCPlayer.params.videoId;
$.get(url, function(n){
FCPlayer.params.views=n;
});
return FCPlayer.params.views;
*/
return 1000;
}
/***************************************************************************
* To add your plugin to FCPlayer, call FCPlayer.registerPlugin Supply it
* with two parameters
*
* 1) The name of your plugin. Whatever you want.
* 2) Your Plugin creation function.
**************************************************************************/
FCPlayer.registerPlugin('myViews', FCPlayer.myViewsPlugin);
/*
* ===================================================================================
* End Example 1
* ===================================================================================
*/
/*
* ===================================================================================
* Example 2: A drop down menu plugin
* ===================================================================================
*/
/***************************************************************************
* myMenuPlugin - A user defined function which returns your plugin's HTML
* content. This content will be loaded into the player's menu bar.
*
* Arguments: none
* Returns: A string containing the HTML for your plugin.
**************************************************************************/
FCPlayer.myMenuPlugin = function() {
return "<a href='' id ='menu_target"
+ _id
+ "' style='color:white;font-size:9px;font-family:arial;"
+ "text-decoration:none;' onclick='return FCPlayer"
+ _id + ".toggleMyMenu()'>My Menu</a>"
}
/***************************************************************************
* createMyMenu - A user defined function which returns the HTML
* content of your drop down menu.
*
* Arguments: none
* Returns: A string containing the HTML for your drop down menu.
**************************************************************************/
FCPlayer.createMyMenu = function() {
return "One<br>Two<br>Three<br><hr width=100% size=1 style='height:1px'>"
+ "Now is the time for all good men to come to the aid of their party."
+ " Now is the time for all good men to come to the aid of their party"
}
/***************************************************************************
* toggleMyMenu - A function to show/hide your menu. You must call
* FCPlayer.toggleMenu within this function and supply it with four
* parameters. This function should always return false.
*
* 1) The name of your menu.
* 2) A menu style object
* 3) A menu creation function.
* 4) The id of the menu's target element. (the element from which the menu will be offset)
*
* Arguments: none
* Returns: false
**************************************************************************/
FCPlayer.toggleMyMenu = function() {
FCPlayer.toggleMenu('myMenu', customMenuStyle, FCPlayer.createMyMenu,
'menu_target' + _id);
return false;
}
// customMenustyle - an object that defines your menu style params
var customMenuStyle = {
left :null,
top :null,
offsetLeft :0,
offsetTop :0,
width :250,
height :null,
color :"transparent",
opacity :.4,
shadow :false,
padding :"10px",
backgroundImage :"",
fontStyles :"font-size: 8pt;font-family:arial;color:black",
border :"0px solid black",
DONOTTOUCHTHIS :0
};
// To use the default menu style instead uncomment below
// customMenuStyle=FCPlayerConfig.menuStyle;
/***************************************************************************
* To add your plugin to FCPlayer, call FCPlayer.registerPlugin Supply it
* with two parameters
*
* 1) The name of your plugin.
* 2) Your Plugin creation function.
**************************************************************************/
FCPlayer.registerPlugin('myMenu', FCPlayer.myMenuPlugin);
/*
* ===================================================================================
* End Example 2
* ===================================================================================
*/
/***************************************************************************
* THIS MUST APPEAR AT THE END OF THIS FILE. DO NOT REMOVE.
*
**************************************************************************/
FCPlayer.pluginLoaded();
})();
|