Skip to content

Latest commit

 

History

History
83 lines (65 loc) · 3.05 KB

README.md

File metadata and controls

83 lines (65 loc) · 3.05 KB
Raw

Google IMA HTML5 preroll ad plugin for Clappr player

Google IMA HTML5 SDK (v3) preroll only ad plugin for Clappr video player.

This is a simple proof of concept based on Clappr ad skeleton plugin example.

This plugin is supported ONLY by Clappr version 0.2.66 or greater. (For older Clappr versions, use the 0.0.7 version of the plugin).

On mobile devices, it support only Clappr playbacks which use an HTML5 video element.

See also demo page hosted on Github.

Usage

Add both Clappr and the plugin scripts to your HTML:

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clappr/0.2.66/clappr.min.js"></script>
  <script type="text/javascript" src="dist/clappr-google-ima-html5-preroll-plugin.js"></script> // yes, that's a long name ;-)
</head>

Then just add ClapprGoogleImaHtml5PrerollPlugin into the list of plugins of your player instance, and the options for the plugin go in the googleImaHtml5PrerollPlugin property as shown below.

var player = new Clappr.Player({
  source: "http://your.video/here.mp4",
  autoPlay: false, // Mandatory player option
  plugins: {
    core: [ClapprGoogleImaHtml5PrerollPlugin],
  },
  googleImaHtml5PrerollPlugin: {
    tag: 'VAST_TAG_URL',
    // autostart: false, // Default is true
    // events: { /* Event map */ },
    // imaLoadTimeout: 3000, // Default is 6000 milliseconds
  }
});

Events

For more details, see Google IMA events types.

  // [...]
  googleImaHtml5PrerollPlugin: {
    events: {
      content_resume_requested: function() { console.log('content_resume_requested') },
      content_pause_requested: function() { console.log('content_pause_requested') },
      loaded: function() { console.log('loaded') },
      click: function() { console.log('click') },
      impression: function() { console.log('impression') },
      started: function() { console.log('started') },
      first_quartile: function() { console.log('first_quartile') },
      midpoint: function() { console.log('midpoint') },
      third_quartile: function() { console.log('third_quartile') },
      complete: function() { console.log('complete') },
      paused: function() { console.log('paused') },
      resumed: function() { console.log('resumed') },
      skipped: function() { console.log('skipped') },
      user_close: function() { console.log('user_close') },
      ad_error: function(e) { console.log('ad_error: ' + e.getError()) }, // AdErrorEvent
      error: function(e) { console.log('error', e) },
    }
  }
  // [...]

Development

Install dependencies :

  yarn install

Start HTTP dev server (http://0.0.0.0:8080) :

  yarn run start