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.
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
}
});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) },
}
}
// [...]Install dependencies :
yarn installStart HTTP dev server (http://0.0.0.0:8080) :
yarn run start