Plyr Ads

Preroll plugin for the awesome Plyr media player.

Checkout the demo

Installation

$ npm install plyr-ads --save

Run demo

$ gulp demo

Features

• Google IMA - works with the Google IMA SDK
• Responsive - works with any screen size
• SASS - to include in your build processes

Features currently being developed

• Youtube video as preroll

Planned features (in any order)

• VAST support
• Midroll and postroll
• Api
• Events to hook into like: 'started', 'midpoint', 'ended', etc... ...and whatever else has been raised in issues

If you have any cool ideas or features, please let me know by creating an issue or, of course, forking and sending a pull request.

Initialising

PlyrAds extends on one or many Plyr instance. Make sure to include the Google IMA SDK and ofcourse Plyr.

Html

<script type="text/javascript" src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

Javascript

var player = plyr.setup();
plyrAds.setup(player, options);

Options

Options must be passed as an object to the setup() method as above or as JSON in data-plyr attribute on each of your target elements:

var player = plyr.setup();
plyrAds.setup(player, {
  adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator='
});

Skip button options

Thanks

Thanks to Sam Potts and all his contributors who build the awesome Plyr video player.

Copyright and License

The MIT license.