Fun w/Jwplayer & ad calls & events
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"> </div>
<div id="container_jwpsrv"> </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({
width:'100%',
aspectratio: '16:9',
image:'',
advertising: {
client: "vast",
'skipoffset':5,
tag: "http://mediazonetv.com/xml/vast?user=1"
},
sources:[
{
file: 'http://techslides.com/demos/sample-videos/small.mp4',
type: 'video/mp4'
}
],aboutlink:"http://xxlclip.com/",
abouttext:"Powered By David",
skin: "http://mediazonetv.com/template/static/jwplayer/skins/aPurple/aPurple.xml",
});
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("");
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 = "#050";
}