Fun w/Jwplayer & ad calls & events

by karimkhan

HTML

<script src="//cdn.jsdelivr.net/jwplayer/6.7/jwplayer.flash.swf"></script>
<script src="http://jwpsrv.com/library/5V3tOP97EeK2SxIxOUCPzg.js"></script>
<h1>JWPlayer 6</h1> 

<div id="container" class="jwplayer playlist-none">&nbsp;</div>
<div id="container_jwpsrv">&nbsp;</div>

CSS

#container {
  position: relative;
  padding-bottom: 56%;
  padding-top: 20px;
  height: 0;
}

 div.jwpreview.jwexactfit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1" />');
$('head').append('<meta content="authenticity_token" name="csrf-param" />');
$('head').append('<meta content="qzb6rDDALKCDvzdt9n40lte3woSsHAK09dryJpfvZIw=" name="csrf-token" />');
$('container').append(' <input type="hidden" name="authenticity_token" value="qzb6rDDALKCDvzdt9n40lte3woSsHAK09dryJpfvZIw=" />');
var jwp = jwplayer("container").setup({
    file: 'https://www.youtube.com/watch?v=WbGgqKatP9w',
    stretching: 'exactfit',
    aspectratio: '4:3',
    width: '100%',
    fallback: 'true',
    primary: 'HTML5',
  advertising: {
    client: 'googima',
    tag: 'http://ad.doubleclick.net/pfadx/ABCDEFGH'
  }

}); 


var playonce = false;
jwp.onBeforePlay(function () {
    if (!playonce) {
        window.alert("This is where we can force an ad call");
        console.log("onBeforePlay event fired, pre-playAd()");
        jwplayer("container").playAd("http://demo.jwplayer.com/player-demos/assets/preroll.xml");
        console.log("onBeforePlay event fired, post-playAd()");
    };
    playonce = true;
});


jwp.onAdImpression(function (event) {
    console.log("The ad impression was fired.");
});
jwp.onAdTime(function (event) {
    var remaining = Math.round(event.duration - event.position);
    console.log("The ad completes in " + remaining + " seconds.");
});
jwp.onAdClick(function (event) {
    console.log("The user clicked the ad.");
});
jwp.onAdComplete(function (event) {
    console.log("The ad was completely watched.");
});

function setElement(element, message) {
    var div = document.getElementById(element);
    div.innerHTML = message;
    div.style.color = "#090";
}