|
FCPlayer How-tos |
IndexHow to add advertisements to your videos with the ad loader.
|
|
The commercial version of the player comes with an advertisement loader, which allows you to display your advertisements side by side with the playing video. The player can load any type of ad content, whether it be jpeg, gif, or swf banners.
Creating an ad template
The first step in loading ad content is to create one or more ad templates. Open the file FCPlayer/config/FCPlayerConfig.js with a text editor. You will place your ad templates in the adTemplates object found in this file.
Below is the adTemplates object as it appears in FCPlayerConfig.js:
adTemplates:{
template1:{
name:"template1",
superimpose:false,
layout:"vertical",
width:160,
hideButton:true,
adList:[
{
url:"",
link:"",
alpha:.5
},
{
url:"",
link:"",
alpha:.5
}
]
},
template2:{
name:"template2",
superimpose:true,
layout:"horizontal",
width:80,
hideButton:false,
adList:[
{
url:"",
link:"",
alpha:1
}
]
},
DONOTTOUCHTHIS:0
Within the adTemplates object, there are two skeleton templates--namely template1 and template2. You can build upon these templates or add your own. There is no limit to the number of different templates you can add. In addition, you can label your templates with arbitrary names. For instance, you could create a third template and label it "template3", or "mytemplate" or anything you want.
If you create your own templates, you should carefully examine the syntax of the templates above, and make sure that you follow it exactly. The syntax is called Javascript Object Literal Notation and you can google it to find more information.
Let's now take a look at the contents of template1. The following six parameters must be present in each ad template.
name:"template1",
This is the name of your template. You can name your templates anything you like, just make sure the names are different for each one.
superimpose:false,
The superimpose parameter takes the values true or false. If false, as in this case, the ads will not be superimposed over the video screen, but instead, will be displayed to the side of it.
layout:"vertical",
The layout can be either "vertical" or "horizontal". A vertical layout will be displayed on the right side of the player viewing screen. A horizontal layout will be displayed along the bottom of the viewing screen.
width:160,
The width parameter specifies the amount of screen space that the advertisements will occupy, in pixels. If your layout is vertical, the width should be slightly larger than the width of widest ad in the template's ad list. If your layout is horizontal, you should set the width to slightly more than the tallest ad in the ad list. The examples below illustrate how the width parameter is reckoned.
hideButton:true,
HideButton takes two values, true or false. If true, a button will be displayed which enables the user to hide the advertisements.
adList:[
{
url:"",
link:"",
alpha:.5
},
{
url:"",
link:"",
alpha:.5
}
You will place the ads to be used with your template in the adList array. Above, as you can see, there are two slots for ad content, designated by the curly braces. You can add or remove slots as you wish. There is no restriction on the number of ads you can place in your templates. One thing to point out is that there are commas after each slot except for the final one. You must follow this convention or your templates will not work. We will show you how to fill each slot with some content next.
Setting up the ad list
Here is the adList parameter with two ads added.
adList:[
{
url:"http://www.fastcatsoftware.com/FCPlayer/ads/ad.gif",
link:"http://www.mysite.com"
},
{
url:"http://www.fastcatsoftware.com/FCPlayer/ads/loadme.swf",
alpha:.5
}
Each entry in the ad list takes three parameters, url, link, and alpha. url is required. The other two parameters are optional. Below is a description of the function of each:
url
This is the location of the ad resource.
link
A link that the user will be taken to when they click on the ad.
alpha
The degree of transparency of the ad. The range of this parameter is from 0-1. 1 means no transparency, whereas 0 is the maximum transparency.
The ads will be loaded into the player in the order that they appear in this list. Again, you may have as many entries into the list as you desire.
Calling your ad template from FCPlayer.play
After you have set up your ad templates, you may load a specific template into the player using the FCPlayer.play loadAdTemplate option.
Here is an example:
FCPlayer.play(
'null',
'null',
'myVideo.flv',
{
loadAdTemplate:'template1'
}
)
Here, we are calling 'template1' to be loaded into the player when the video is played.
Additionally, you can tell the player to choose a random template, as follows:
An example
This example comes from the FCPlayer demo.
First here are the ad templates in FCPlayerConfig.js:
adTemplates:{
template1:{
name:"template1",
superimpose:false,
layout:"vertical",
width:160,
hideButton:true,
adList:[
{
url:"http://www.fastcatsoftware.com/FCPlayer/ads/ad.gif",
link:"http://www.google.com"
},
{
url:"http://www.fastcatsoftware.com/FCPlayer/ads/loadme.swf",
alpha:.5
}
]
},
template2:{
name:"template2",
superimpose:true,
layout:"horizontal",
width:80,
hideButton:true,
adList:[
{
url:"http://www.fastcatsoftware.com/FCPlayer/ads/aspose468x60.gif",
link:"http://www.google.com",
alpha:.4
}
]
},
DONOTTOUCHTHIS:0
Calling the first ad template:
FCPlayer.play(
'null',
'null',
'popmusic.flv',
{
loadAdTemplate:'template1'
:
:
(some of the other options have been ommitted)
:
:
}
)
Results in the following:
Calling the second ad template:
FCPlayer.play(
'red5',
'rtmp://66.197.216.85:1934/oflaDemo',
'on2_flash8_w_audio.flv',
{
loadAdTemplate:'template2'
:
:
(some of the other options have been ommitted)
:
:
}
)
Results in the following:
|
|
|
| |
