Git Product home page Git Product logo

clappr-google-ima-html5-preroll's Introduction

END OF LIFE

This plugin is "deprecated" and may not be compatible with future Clappr player releases.

Please consider using clappr-ima-plugin plugin.

Google IMA HTML5 preroll ad plugin for Clappr player

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.

Usage

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.

Events

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) },
    }
  }
  // [...]

Development

Install dependencies :

  yarn install

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

  yarn run start

clappr-google-ima-html5-preroll's People

Contributors

craytor avatar dependabot[bot] avatar kslimani avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

clappr-google-ima-html5-preroll's Issues

HLS not playing after ad on IOS

In Safary (Iphone) IMA SDK do not dispatch google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED event, so method this._playVideoContent() will not be called.

Simple workaround is to set:
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = false

feat: trigger a new plugin event for ima custom settings

TODO: add a new event, passing an object which contains plugin instance, google.ima object library. (something else ?)

should allow to do something like :

googleImaHtml5PrerollPlugin: {
    events: {
        ima_loaded: function(evt) {
            # evt.target is plugin instance
            # evt.ima is google.ima object

            # Apply custom settings
            evt.ima.settings.setDisableCustomPlaybackForIOS10Plus(true);
        },
    }
}

Companion Ads

Is there a way to get and display the companion ads for DFP preroll videos?

Not working with Clappr.FlasHLS plugin

Hi, it's amazing but when I'm using it with clappr.flashls plugin it will not work

My plugin configuration:

plugins: {
playback: [Clappr.FlasHLS],
core: [LevelSelector, ClapprGoogleImaHtml5PrerollPlugin]
},

Autoplay Policy

I see in the demo that you are using canautoplay to detect if the ad should auto start. I know that Clappr itself has a method built into it to do this. Is there a class or something I can call to determine if the ad should autoplay? Basically, I don't want to have to load canautoplay if Clappr has a method I can use already.

Non linear ad support

Hi there
I think non linear ads are not working properly, is there any support for this ad format in the near future?
Thanks

Enable media control

Hi! Thanks for the great plugin.
Is it possible to enable media controls while playing ads?
I want to handle some additional events such as expand/collapse, mute/unmute, pause/resume.

Poster not visible

When I initialize the Clappr.Player with a poster parameter, the poster is not visible when using this plugin. Once I remove this plugin, the poster works as intended. Is this how it's supposed to be?

Fullscreen is broken after ad display

Can reproduce with Firefox 47.0.1 and Windows 7 on demo page.

Double-click on video after ad display may crash the player.

Error message is something like The request for access to full-screen was denied because Element.requestFullScreen () was not called within a user-generated event handler.

Ad error: AdError 1005: The provided ad type: skippablevideo is not supported.

I am getting this error when playing a preroll ad on iOS. The video will not play if the line item is set to 'skippable'. I found some code on videojs that seems to support skippable ads but do not know if Clappr has this functionality or not. Help please!

From what I read there, the preroll video must be set as 'playsinline', which I set, but also need the option 'disableCustomPlaybackForIOS10Plus: true'. Is there an option like this for Clappr and if so how do I implement it. Thanks in advance.

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.