Google IMA HTML5 SDK ads plugin for Clappr video player.
To see the plugin in action, check out demo page.
Add both Clappr and the plugin scripts to your HTML :
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr-ima-plugin@latest/dist/clappr-ima-plugin.min.js"></script>
</head>Then add ClapprImaPlugin into the list of plugins of your player instance, and the options for the plugin go in the imaPlugin property as shown below :
var player = new Clappr.Player({
source: "https://your.video/here.mp4",
playback: {
playInline: true, // Required by skippable ads on iOS (not fullscreen)
},
plugins: [
ClapprImaPlugin
],
imaPlugin: {
// requestAdIfNoAutoplay: true,
// disableNonLinear: true,
// disableNonLinearForIOS: true,
// resetAdOnEnded: true,
// onAdPlayerReady: function (adPlayer) { adPlayer.on('midpoint', function(o) { console.log(o); }); },
imaAdPlayer: {
tag: 'https://myadserver.com/path/to/vast/tag.xml',
// vpaidMode: ClapprImaPlugin.vpaidMode.INSECURE,
// locale: 'fr',
// maxDuration: 30000,
// nonLinearMaxDuration: 8000,
// adsRenderingOptions: {
// useStyledNonLinearAds: true,
// },
},
},
});Skippable ads require that your video player play content inline (not fullscreen) on iPhone.
| Name | Type | Required | Description |
|---|---|---|---|
| imaAdPlayer | object | yes | The IMA Ad player configuration object. (must at least contain "tag" property) |
| disableNonLinear | boolean | no | Set this option to true to not display non-linear ads (default is false) |
| disableNonLinearForIOS | boolean | no | Set this option to true to not display non-linear ads on iOS devices. There is a known issue with non-linear ads and "click_to_play" Clappr internal plugin on iOS devices. (default is false) |
| onAdPlayerReady | Function | no | Can be used to retrieve IMA Ad Player instance. For example, to bind specific ad player events. |
| requestAdIfNoAutoplay | boolean | no | Set this option to true to attempt to pre-request ads if autoplay is not allowed by browser. By default, ads are requested when video content is started. (default is false) |
| resetAdOnEnded | boolean | no | Set this option to true to reset ads scenario when content video is ended. By default, ads are not displayed again if video content is restarted. (default is false) |
Install dependencies :
yarnStart HTTP dev server (http://0.0.0.0:8080) :
npm startThe MIT License (MIT). Please see License File for more information.