A JavaScript based advertising setup Scripting - Demo 2 / 7

Introduction

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

Flowplayer configuration

The setup consists of two parts: the content plugin and cuepoints.

Content plugin

The advertisement is shown by setting the background image of the content plugin. The plugin is initially hidden. We have defined an onClick handler that will point the user to the location specified in the advertisement depending on the cuepoint.

// define an advertisement using content plugin 
	plugins: { 
	  content: { 
		 url: 'flowplayer.content-3.1.0.swf',

		 // plugin is initially hidden		 
		 display: 'none',
		 
		 // no background and 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; 
		 }
	  } 
	},

Cuepoints

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

1. time specifies when the advertisement is shown.
2. image specifies the path to the advertisement.
3. 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: '/img/title/eye192.png', url: '/demos/'},
			{time: 8000, image: '/img/title/screens.png', url: '/documentation/'},
			{time: 14000, image: '/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 it's 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 it's onClick handler
			p.adUrl = ad.url;
			
			// gradually hide the plugin after 4 seconds
			setTimeout(function() { p.fadeOut(1000); }, 4000);
		}] 
	}

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.