This is a message.

Display ads with Javascript

Show images over the video at predefined intervals

standalone demo

In this demo, Here we have a player that displays images over the video screen at predefined intervals. Clicking on the image will send your browser to some interesting location. This is a "mini-advertisement" setup that can be easily done with the aid of the content plugin and some JavaScript coding.

Content Plugin

// the content plugin will show the ad
plugins: {
content: {
url: "flowplayer.content-3.2.9.swf",
 
// initially hidden
display: 'none',
 
// no background and no decorations
backgroundGradient: 'none', backgroundColor: 'transparent', border: 0,
 
// position and dimensions
bottom: 0, right: 0, width: 150, height: 200,
 
// click on the image goes to certain place
onClick: function() {
location.href = this.adUrl;
}
}
},

JavaScript

Cuepoints

Here we have cuepoints and the JavaScript function that performs an action when a cuepoint is reached. The cuepoints are our advertisements and they have three properties as follows:

  • time specifies when the advertisement is shown.
  • image specifies the path to the advertisement.
  • url specifies where the user is forwarded when the advertisement is clicked.

These cuepoints are given to the cuepoint handler function whose functionality is documented below.

clip: {
 
// define advertisements
onCuepoint: [ [
{time: 1000,
image: '/media/img/title/eye192.png',
url: '/demos'},
{time: 8000,
image: '/media/img/title/screens.png',
url: '/documentation'},
{time: 14000,
image: '/media/img/logo/logo_164x164.png',
url: '/plugins'}
],
 
// the function that makes those ads visible
function(clip, ad) {
 
// get a handle to the content plugin
var p = this.getPlugin("content");
 
// change its background image and gradually show it in 1000 seconds
p.css({backgroundImage: ad.image}).fadeIn(1000);
 
// set plugin's adUrl property to be used in its onClick handler
p.adUrl = ad.url;
 
// gradually hide the plugin after 4 seconds
setTimeout(function() { p.fadeOut(1000); }, 4000);
}]
}

JavaScript

Applications

Here are some development ideas on how this configuration could be taken a bit further:

  • You can load the advertisement from an external configuration file.

  • You may add CSS properties into cuepoints and use them on the cuepoint handler. In this way you can alter the position, dimensions or styling of each individual ad.

  • You may want to wrap all of these functionalities into a JavaScript plugin.

  • Use the cuepoint handler function to place the advertisements outside the player. You only need to get a handle to a certain HTML element and change its background image property and onClick handler. In fact, DOM scripting is in many ways very similar to Flowplayer scripting.