This is a message.

Display ads with Javascript

Show images over the video at predefined intervals

Search engine friendly content
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: "http://releases.flowplayer.org/swf/flowplayer.content-3.2.8.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.