|
FCPlayer How-tos |
IndexHow to use the built in fcp_thumb class to add a play button to an image.
|
|
In this tutorial, we will show you how to overlay a play button over an image. This technique is especially usefull when using FCPlayer in the pop-up mode.
Using this technique, you need only generate a preview image of your video, and add it to your web page, as you would any other image.
Next, you will wrap the fcp_thumb class around the image, which will overlay a play button on the image and link the image to FCPlayer. When someone clicks the play button (or the image), FCPlayer will load and play the video immediately.
As of version 1.1.9, FCPlayer comes with built in support for play button overlays, including an array of play button icons (see below) that you can use for your videos. If you have a previous version, you will need to download the Play Button Overlay Kit and add it to your player. Follow the directions in install.txt, found in the kit.
Start with a preview image
Here is the preview image for the video we wish to play. We add the preview image to our page with the following HTML:
<img src='/FCPlayer/images/summervacation.jpg' border=0>
.
Wrap the fcp_thumb class around the image.
Next, we will wrap the 'fcp_thumb' class around the image. The definition of this class can be found in FCPlayer/css/FCPlayer.min.css. Two nested divs are neccessary to effectively implement the class. At the same time, we add the call to FCPlayer.play, so that when the image is clicked, the appropriate video is played. Setting the playstate to 'Run' allows the video to start immediately on loading.
<div class='fcp_thumb'>
<div>
<a onclick="return FCPlayer.play(
'null',
'null',
'sample.flv',
{
playState:'Run'
}
);" href='' target=blank> <img src='/FCPlayer/images/summervacation.jpg' border=0><span></span>
</a>
</div>
</div>
Any text placed between the span tags above will also be written over the image. Furthermore, the span tag's style attribute may be edited, in order to adjust the properties of the overlay, as we will see below.
Center the play button.
The play button's default location is in the top left corner of the image. In many cases, we would like the play button to be nicely centered over the image. To do this, we add some style attributes to the span tag, as follows:
<div class='fcp_thumb'>
<div>
<a onclick="return FCPlayer.play(
'null',
'null',
'sample.flv',
{
playState:'Run'
}
);" href='' target=blank><img src='/FCPlayer/images/summervacation.jpg' border=0><span style='top:30px;left:55px'></span>
</a>
</div>
</div>
Now the play button is located 55 pixels to the right and 30 pixels down from the top left corner of the image.
There is more than one way to apply style changes to the fcp_thumb class. Here, we are applying the changes directly to the video's span tag, using the style attribute. This is the way to procede if you want to change the style parameters of your videos on an individual basis. For example, if your videos' preview images all have different sizes, then you must adjust the top and left parameters of each video individually, as shown above.
Alternatively, you could open up FCPlayer/css/FCPlayer.min.css and edit the class definition, changing the top and left parameters, for instance, to any desired values. These changes would then apply to all members of the fcp_thumb class. They would be the default values, unless overridden, once again, by the 'style' attribute.
Changing the play button icon.
The play_buttons folder (FCPlayer/current_skin/play_buttons) contains several play button icons that you can use with your videos. You may also use your own custom icons. After deciding which icon to use, we apply the change as follows:
<div class='fcp_thumb'>
<div>
<a onclick="return FCPlayer.play(
'null',
'null',
'sample.flv',
{
playState:'Run'
}
);" href='' target=blank><img src='/FCPlayer/images/summervacation.jpg' border=0><span style=' background: transparent url(/FCPlayer/current_skin/play_buttons/blue_small_play_video.png) no-repeat scroll top left;width:94px;height:58px;top:30px;left:30px'></span>
</a>
</div>
</div>
The url now points to the new play button icon: /FCPlayer/current_skin/play_buttons/blue_small_play_video.png. When you change the icon, you must specify the width and height of the new icon in px (pixels). eg. width:94px;height:58px;. As you can see, the left parameter has also been changed in order to recenter the play button of the image.
Adding text to the overlay
To add text to the overlay, simply insert your text between the span tags. Use the padding property to move the text into the desired position.
<div class='fcp_thumb'>
<div>
<a onclick="return FCPlayer.play(
'null',
'null',
'sample.flv',
{
playState:'Run'
}
);" href='' target=blank><img src='/FCPlayer/images/summervacation.jpg' border=0><span style=' background: transparent url(/FCPlayer/current_skin/play_buttons/blue_small.png) no-repeat scroll top left;width:68px;height:38px;top:35px;left:35px;padding:9px 0px 0px 38px'>Play Me!!</span>
</a>
</div>
</div>
To illustrate the affect of adding your own text, the play button icon has been changed to blue_small.png, which, by itself, contains no text. The padding parameter acts to move the text 9px down and 38px to the right of the top left corner. You may also add CSS properties such as color, font-size, font-family, etc. to the span's style attribute if you wish to change the appearance of the text.
Play button icons that come with FCPlayer
The image below shows the different icons that come with FCPlayer. These icons can be found in the FCPlayer/current_skin/play_buttons folder.
|
|
|
| |
