This plugin is "deprecated" and may not be compatible with future Clappr player releases.
Please consider using clappr-ima-plugin plugin.
Google IMA HTML5 SDK (v3) LINEAR PREROLL AD 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.87 or greater. (For older Clappr versions, use the 0.0.7 or 0.1.0 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://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr-google-ima-html5-preroll-plugin@latest/dist/clappr-google-ima-html5-preroll-plugin.min.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, // Set to false and use plugin autostart option (or set to true if tag is false)
plugins: {
core: [ClapprGoogleImaHtml5PrerollPlugin],
},
googleImaHtml5PrerollPlugin: {
tag: 'VAST_TAG_URL', // VAST tag URL (or false to disable plugin)
vpaid: 1, // Default is 0 (0 is DISABLED, 1 is ENABLED and 2 is INSECURE)
// autostart: false, // Default is true
// events: { /* Event map */ },
// imaLoadTimeout: 3000, // Default is 6000 milliseconds
// nonLinearDuration: 20000, // Default is 15000 milliseconds
// maxDuration: 30000, // Default is false (DISABLED)
// locale: 'fr', // Any two-letter ISO 639-1 code. Default is false (Do not setup)
// disableLoader: true, // Default is false (Loader is enabled)
}
});For more details about VPAID modes, see Google IMA VPAID 2 support.
For more details, see Google IMA events types.
// [...]
googleImaHtml5PrerollPlugin: {
events: {
ima_loaded: function(o) {
// This event signal that ima SDK is loaded
// o.target is plugin instance and o.ima is google.ima object
console.log('ima_loaded', o)
// o.ima.settings.setDisableCustomPlaybackForIOS10Plus(true);
},
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