Publisher » PUB - Tutorials

ID #1031

FlowPlayer: How to embed ads in my player?

`

FlowPlayer: How to embed ads in my player?

 

Adxpansion has made it very easy for publishers that use FlowPlayer to embed ads into their players.

  

See a Demo Here

 

Step 1: Create a new 300x250 ad zone:

From the publisher interface, go through every step to obtain the proper linking code for a new 300x250 zone.

 

Step 2: Obtain the zone_id from your generated ad zone code:

You will later on need the zone_id that is specified in the generated code. So take note of the zone_id to use it in Step 3.

<!-- Generated by AdXpansion -->
<script type="text/javascript" src="http://ads.adxpansion.com/public/js/showads.php?zone_id=9999&ver=1 <br><a target="_top" href="http://www.adxpansion.com/" style="background-color:#FFFFFF;color:#000000;font-size:9px;border:none;font-family:verdana, sans-serif;padding:0;margin:0;">ads by AdXpansion</a>
<!-- End of AdXpansion code -->

Step 3: Insert the following javascript line on your website pages, before your player, but after loading the flowplayer javascript:

You need to insert this code and insert the zone_id obtained in step 2. Make sure you insert this code AFTER loading the flowplayer javascript:

<script type="text/javascript" src="http://ads.adxpansion.com/public/js/showads.php?zone_id=9999&ver=1&type=flowplayer">

 

Step 4: Make sure that your flowplayer code is set to make the flash player transparent:

 

flowplayer("player", { src: "http://dev.sxx.com/temp/jwp/flowplayer/flowplayer-3.2.1.swf", wmode: 'transparent' });

 

Step 5: Tell flowplayer to load up the AdXpansion plugin:

Right after your flowplayer invocation code, tell flowplayer to load the adxpansion plugin.

$f().adxpansion();

 


Complete Example:

 

Here's what a working code would look like

<head>
<script type="text/javascript"
src="http://dev.sxx.com/temp/jwp/flowplayer/example/flowplayer-3.2.0.min.js"></script>
<script type='text/javascript'
src='http://ads.adxpansion.com/public/js/showads.php?zone_id=65&type=flowplayer'></script>

</head>
<body>
<a href="http://vod01.netdna.com/vod/demo.flowplayer/flowplayer-700.flv"
style="display: block; width: 630px; height: 500px;" id="player">
</a>
<script type="text/javascript">
flowplayer("player", { src: "http://dev.sxx.com/temp/jwp/flowplayer/flowplayer-3.2.1.swf", wmode: 'transparent' },{
clip: {autoPlay: true}
});
$f().adxpansion();
</script>
</body>

 

Advanced Usage:

 

Using Flowplayer with mod_secdownload:

If you are using lighttpd with mod_secdownload, you need a special flowplayer plugin called Secure Streaming. You can download and read the setup instructions on this page:

http://flowplayer.org/plugins/streaming/secure.html

 

Customizing the AdXpansion plugin:

It's possible to customize how the adxpansion plugin will display the ad inside your player. The syntaxt is:

 

$f().adxpansion({

offsetx: POSITIVE_OR_NEGATIVE_NUMBER_OF_PIXEL,

offsety: POSITIVE_OR_NEGATIVE_NUMBER_OF_PIXEL,

displayonload: TRUE_OR_FALSE,

header: 'HTML_OF_CUSTOM_AD_HEADER',

footer: 'HTML_OF_CUSTOM_AD_FOOTER'

});

 

 

Here's a brief explanation of each option:

  • ofssetx: will move the ad in the player either left or right. Use negative number to move toward the left.
  • offsety: will move the ad in the player either toward the top or the bottom. Use negative numbe to move up.
  • displayonload: if set to true, the ad will get displayed before the movie start. This is not recommanded if your movie autostart.
  • header: customize the look of the ad container. Be careful when setting this as you can really screw things up.
  • footer: customize the footer of the ad container. Also be careful and talk with your account manager to approve changes you make to both footer and header.

 

Known Problem:

If you set your clip to not autostart and don't use a default splash image, the transparent player will cause the player to be ugly and not to display the first frame of the movie. The solution is to use a splash imag e.

Tags: -

Related entries:

Last update: 2010-06-14 14:28
Author: AdXpansion Admin
Revision: 1.4

Digg it! Print this record Send to a friend Show this as PDF file

You cannot comment on this entry