|
FCPlayer How-tos |
IndexHow to enable your videos to be shared with other sites.
|
|
In this tutorial, you will learn how to use the share menu bar plugin to add linking and embedding code to your videos. You should already be familiar with the mechanics of adding plugins to the menu bar. If not, read the tutorial Adding plugins to the menu bar.
The share plugin adds a menu option, which when clicked, presents the user with a screen containing the necessary link/embed code.
Setting up your video sharing options in FCPlayerConfig.js
Open FCPlayer/config/FCPlayerConfig.js with a text editor.
Find the share object, which begins with share:{
The share object defines some default parameters for video sharing. Most of these parameters can be overridden by including an equivalent parameter in your call to FCPlayer.play(), as you will see below. However, if the parameter is not specified in FCPlayer.play(), it will default to the value found here.
Here is a list of the aforementioned share parameters:
host - The domain that will host shared videos. If host is not specified, the current domain will be inserted into the embed code.
baseLink - baseLink is prepended to the share.link parameter that you use in the FCPlayer.play function. Thus baseLink + share.link = the full linking url.
width - The default width of shared videos.
height - The default height of shared videos.
allowEmbedded - (true/false) If false, no embed code will be given to the user.
useCustomEmbedTag - (true/false) If true, you will supply your own custom embedding code, instead of letting the player generate the default embedding code.
customEmbedTag - Custom HTML code for embedding your videos.
customEmbedURL - A URL to replace the %url% part of your custom embed tag
customEmbedID - An ID to replace the %id% part of your custom embed tag
allowOptions - (true/false) Enables/disables the use of the menu bar within shared videos.
linkOptionEnabled - (true/false) Enables/disables the use of the share menu option within shared videos.
Example Configuration:
share:{
host:"",
baseLink:"",
width:500,
height:350,
allowEmbedded:true,
useCustomEmbedTag:false,
customEmbedTag:"",
customEmbedURL:"",
customEmbedID:"",
allowOptions:true,
options:{
linkOptionEnabled:true
},
DONOTTOUCHTHIS:0
Adding the share plugin through FCPlayer.play()
Here is an example of a call to FCPlayer.play() in which the share plugin has been added:
FCPlayer.play(
'null',
'null',
'myVideo.flv',
{
plugins:['defaultSharePlugin'],
share:{
link:'http://www.mysite.com/videoplayer.html?vid=12345',
width:400,
width:300
}
}
)
The plugins array, in red above, lists the names of the plugins to be added to the players's menu bar. In this case, the 'defaultSharePlugin' is to be added.
The share object, also in red, encapsulates the properties of this plugin.
The properties 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.
Creating a custom embed tag
Because FCPlayer combines javascript and flash technologies, it is best embedded in other sites as an iframe. The default embedding code generated by FCPlayer is therefore, precisely that, an iframe. Unfortunately, some sites, most notably social networking sites such as Myspace and Facebook, do not allow the embedding of iframes in their pages. This is why FCPlayer comes with the option of creating a custom embed tag, in which you can specify a pure flash player, such as the Youtube player, as your player of choice for sharing your video.
Below we will take you through the steps of creating a custom embed tag, using the Youtube player as an example.
In this example, let's say the embedding code that you will need to provide your users is as follows:
<embed src="http://www.youtube.com/v/6TMdsm-vWwE&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="never" allowfullscreen="true" width="425" height="344">
Open the configuration file FCPlayerConfig.js and set up the share object with your custom tag.
share:{
host:"",
baseLink:"",
width:425,
height:344,
allowEmbedded:true,
useCustomEmbedTag:true,
customEmbedTag:"embed src=\"%url%\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"never\" allowfullscreen=\"true\" width=\"%width%\" height=\"%height%\"",
customEmbedURL:"",
customEmbedID:"",
allowOptions:true,
options:{
linkOptionEnabled:true
},
DONOTTOUCHTHIS:0
Notice that all the double quotes within the embed tag need to be preceded by backslashes. Some parts of the tag have been removed and replaced by variables, namely %url%, %width%, and %height%. These will be filled in later by FCPlayer when the tag is generated.
Next, a call to FCPlayer.play() which includes the necessary embedding code.
FCPlayer.play(
'null',
'null',
'myVideo.flv',
{
plugins:['defaultSharePlugin'],
share:{
customEmbedURL:'http://www.youtube.com/v/6TMdsm-vWwE&hl=en&fs=1&'
}
)
Now, when the user clicks on the share menu option, they will be presented with the Youtube embed code above.
|
|
|
| |
