Git Product home page Git Product logo

clappr-ima-plugin's Introduction

MIT license

Interactive Media Ads (IMA) SDK plugin for Clappr

Google IMA HTML5 SDK ads plugin for Clappr video player.

Note: Clappr player version must be >= 0.2.97 and <= 0.4.0.

To see the plugin in action, check out demo page.

Getting started

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-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.

Plugin options

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)

Development

Install dependencies :

  yarn

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

  npm start

License

The MIT License (MIT). Please see License File for more information.

clappr-ima-plugin's People

Contributors

kslimani avatar dependabot[bot] avatar

Stargazers

Roman avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.