mailonline / vpaidhtml5client Goto Github PK

View Code? Open in Web Editor NEW

64.0 66.0 44.0 216 KB

VPAID HTML5

License: MIT License

JavaScript 92.38% HTML 6.14% CSS 1.49%

vpaidhtml5client's Introduction

VPAIDHTML5Client

About

JS iframe wrapper for VPAID.

VPAID or Video Player Ad-Serving Interface Definition, establishes a common interface between video players and ad units, enabling a rich interactive in-stream ad experience.

The goals of VPAIDHTML5Client are:

common interface for VPAID in different technologies HTML5 and FLASH.
handle how to load the VPAID adUnit
be a simple and "stupid" implementation of VPAID

check videosjs-vast-vpaid if you need VPAID in videojs

JS

The project uses:

gulpjs to compile.

TODO

test how will work with a real ad in the demo and test
try to use the slot element inside the iframe to see if the ad's will not mess the css of the page
validate better if the postmessage and iframe works across browsers

Running the project

install nodejs and gulp
npm install to install all dependencies
gulp serve or npm start to start build script and a demo page should be open in default browser
gulp to watch, bundle and run tests
npm test or gulp test:ci task used by the server
gulp deploy:demo task used to update githubpage with demo and bin

Example of the usage

var vpaid = new VPAIDHTML5Client(el, video, {});
vpaid.loadAdUnit('vpaidAdURL.js', onLoad);

function onLoad(err, adUnit) {
    if (err) return;

    adUnit.subscribe('AdLoaded', onInit);
    adUnit.subscribe('AdStarted', onStart);

    adUnit.handshakeVersion('2.0', onHandShake);

    function onHandShake(error, result) {
        adUnit.initAd(480, 360, 'normal', -1, {AdParameters: currentAd.adParameters}, {});
    }

    function onInit() {
        adUnit.startAd();
    }

    function onStart() {
        console.log('-> AdStarted');
    }

}

License

licensed under the MIT License, Version 2.0. View the license file

vpaidhtml5client's People

Contributors

Stargazers

Watchers

vpaidhtml5client's Issues

Video Ad not showing

Hi, first of all, good job on this library 👍

I''m having some trouble with the video ads, whenever my video player switches to the Vpaid Iframe i can't see the ad's video content, only the overlay interaction buttons.
I'm using the URL from the demo folder (in index.html) in the library (i use it while its wrapped in a VAST xml of type VPAID and i parse it accordingly).

I fear that i'm experiencing this issue because my <video> element is loaded dynamically, here is my HTML's <body> content:

    <div id='main-wrapper'>
        <div id='playerWrapper'>
        <!-- Begin - this code loads dynamically -->
            <div class="media-player">
                <video preload controls class="media-video">
                    <source src="video.mp4"></source>
                </video>
            </div>
         <!-- End - this code loads dynamically -->
        </div>
    </div>

And this is how call the the ad unit in my javascript:

  var vpaidClient =  new VPAIDHTML5Client($('#playerWrapper')[0], $('.media-video')[0], {});
  vpaidClient.loadAdUnit('AdUrlSrc.js', onLoad);

  function onLoad(err, adUnit) {
      if (err) return;

      adUnit.subscribe('AdLoaded', onInit);
      adUnit.subscribe('AdStarted', onStart);

      adUnit.handshakeVersion('2.0', onHandShake);

      function onHandShake(error, result) {
          adUnit.initAd(playerObj.width, playerObj.height, 'normal', -1, {AdParameters: ''}, {}); // correct ad parameters are added from the xml
      }

      function onInit() {
          adUnit.startAd();
      }

      function onStart() {
          console.log('-> AdStarted');
      }

  }

Any idea what i'm doing wrong?
would creating a Promise on the <video> element solve this?

google closure compiler got error on leaking arguments checking

In the file
https://github.com/MailOnline/VPAIDHTML5Client/blob/master/js/VPAIDAdUnit.js
line 65-69

...
var ariaty = IVPAIDAdUnit.prototype[method].length;
// TODO avoid leaking arguments
// https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#32-leaking-arguments
var args = Array.prototype.slice.call(arguments);
var callback = (ariaty === args.length) ? args.pop() : undefined;
...

if my application use google closure compiler in ADVANCED mode (and offcource i'm sure i marked this file as extern), the value of ariaty always is 0. This makes the handshakeVersion cannot do the callback, so that the timeout occurs, then my application will get fail.

So, do you have any recommendations to use closure compiler correctly without this error?
Or would you change to use another way to avoid leaking-arguments?

I see that the IVPAIDAdUnit.prototype[method] always is function () {}, so the call IVPAIDAdUnit.prototype[method].length always is 0. In case of handshakeVersion, the IVPAIDAdUnit.prototype[method] should be function (version, callback) {}

Thank you!

VAST Error: timeout while waiting for the video to start playing

Dear,

I am trying to run a vpaid ads here (https://editorsdepot.com/video/videojs/vast.php). 90% times I can see this error (VAST Error: timeout while waiting for the video to start playing). And sometimes (10% times), I can see ads. Can anyone please help me, what's wrong exactly. Things need to mention, these ads(tags) works 100% times in jwplayer...
Here is my full code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://vjs.zencdn.net/5.9.2/video-js.css" rel="stylesheet">
  <link href="vast/videojs.vast.vpaid.min.css" rel="stylesheet">

</head>
<body>
  <video id="videojsPlayer" class="video-js vjs-default-skin"
      controls preload="auto" width="640" height="360"
      poster="https://d1sinn63yldtx0.cloudfront.net/thumbnails/thumbnails-ed_SBQceGipWuIxIxHA-00002.jpg">

      <source src="https://d1sinn63yldtx0.cloudfront.net/videos/edvideos_gvynSbFA_mp4_480x270.mp4" type="video/mp4" label="480p" res="480" />
  </video>
  <script src="https://vjs.zencdn.net/5.9.2/video.js"></script>

  <!-- vast loads js -->
  <script src="vast/videojs_5.vast.vpaid.min.js"></script>

<script>
  var videojsPlayer = videojs('videojsPlayer');
  videojsPlayer.vastClient({
    adTagUrl : "https://wlmad.ads.tremorhub.com/ad/tag?adCode=9e6km&playerWidth=480&playerHeight=270&mediaId=2008&mediaTitle=Stripes%20Multicolor%20Blender%20only%20Intro%20template&mediaDesc=Cool%20stripes%20multicolor%20Blender%20only%20Intro%20template.%20This%20is%20a%20free%20video%20template.&mediaUrl=https://editorsdepot.com/embed/stripes-multicolor-blender-only-intro-template&srcPageUrl=https://editorsdepot.com/stripes-multicolor-blender-only-intro-template",
    adsEnabled : true,
    autoResize : true,
    playAdAlways: true,
    adsCancelTimeout: 5000,
    vpaidFlashLoaderPath: 'vast2/VPAIDFlash.swf'
  });
</script>

</body>
</html>

Thanks in advance....

Events are being fired twice

Hi, i'm experiencing an issue where every time-event is being fired twice one right after the other.
Happens on all browsers on windows
any idea why this could happen?

[branch-protection] Master branch is not protected

Please enable master protection

Error: Object doesn't support property or method 'remove' (Element.prototype.remove())

When Line 169 in VPAIDHTML5Client.js called in <= IE 11 (and other older browsers which do not support it), throws the following error:
Object doesn't support property or method 'remove'

The ChildNode.remove() MDN specification, lists browsers which do not support the ChildNode.remove() method and provides a polyfill for adding support.

I was unable to get tests passing locally before any changes were made. So I will defer to the maintainers to ensure all tests are passing and to bump the package version.

Here is the patch:
https://gist.github.com/diggabyte/a99b06c455475b57719554b1385be4be

How to download a full iframe rather than builds it from the js file and template?

How to download a full iframe rather than builds it from the js file and template? Like this: state.htmlVPaid.loadAdUnit('vpaid.html', onLoad);

iFrame has border

The iFrame created for the VPaid to live in has a border in some browsers/sites.

running post-roll ads VPAIDHTML5Client

I want to run pre-roll and post-roll ads.
How can i do that with VPAIDHTML5Client.?
Where can i find the list of options "vpaidOptions" that can be used with VPAIDHTML5Client(el, video, templateConfig, vpaidOptions).

Controls not working

video controls are not working.
Are they disabled? if yes how to enable them?

Which events are being fired when an ad is paused due to loading difficulties?

When an ad starts but not completely loaded, sometimes the ad's progress time reach the end of the loaded time. I want to have an indication for that, because it is important for me to know when an ad paused.
I know the AdPaused event is fired when the user intentionally pause the ad, but is there an event that is being fired when the ad is paused due to other difficulties?
If there is not, is it possible to add an event like that?

Allow the possibility of listening to all the events

I would be great to be able listen to all the event with a single handler
something like:

adUnit.on('*', function(evt){
   //Code to execute on every event of the adUnit
});