This demonstration of a preroll ad comes along with companions to demonstrate VAST / IMA ad support.
The real plugin parses VAST 1 and VAST 2 including wrappers and supports prerolls, companions and overlay ads. It fires tracking events, sets ad-click
redirects and provides a customizable "skip ad" button. Please refer the plugin docu for more information.
<div id="companionb" style="width:728px; height: 90px; margin: 5px; border: 1px solid #ccc">companion ad 790x90</div>
<div id="companionc" style="width:300px; height: 60px; margin: 5px; border: 1px solid #ccc">companion ad 300x60</div>
<div id="companiona" style="width:300px; height: 250px; margin: 5px; border: 1px solid #ccc; float: left;">companion ad 300x250</div>
<div id="player_a" syle="margin:0; float: right;" class="projekktor"></div>
<div style="clear: both;"></div>
<script type="text/javascript">
$(document).ready(function() {
/*
* IMPORTANT NOTICE:
*
* THIS DEMO DOES NOT USE THE ACTUAL VAST PLUGIN.
*
* This demo just mimics some functionalities of it and is intended to proof that
* preroll ads do work with Projekktor. The orgiginal plugin can be bought online: http://shop.projekktorxl.com/shop/vast-ima/
*/
function setCompanions() {
$('#companionb').html('<img width="728" height="90" src="http://www.projekktor.com/content/demos/vast/imgadb.jpg">');
$('#companionc').html('');
$('#companiona').html('<img width="300" height="250" src="http://www.projekktor.com/content/demos/vast/imgad.jpg">');
$('#companionb').click(function() {
window.location.href = 'http://www.google.com';
})
$('#companiona').click(function() {
window.location.href = 'http://www.google.com';
})
}
projekktor('#player_a', {
debug: false,
poster: 'intro.png',
useYTIframeAPI: false,
width: 410,
height: 267,
controls: true,
playlist: [
{
0:{src:'http://www.projekktor.com/content/demos/vast/1.mp4', type:"video/mp4"},
1:{src:'http://www.projekktor.com/content/demos/vast/1.webm', type:"video/webm"},
config: {
title: 'advertisement',
className: 'ad',
disallowSkip: true,
plugin_controlbar: {
showOnStart: true,
disableFade: true
},
plugin_display: {
staticControls: false,
displayPlayingClick: function() {
alert("Display Clicked, tracked that!")
}
}
}
},
{
0:{src:'http://www.projekktor.com/intro.mp4', type:"video/mp4"},
1:{src:'http://www.projekktor.com/intro.webm', type:"video/webm"},
2:{src:'http://www.projekktor.com/intro.ogg', type:"video/ogg"},
config: {
className: 'postad',
}
}
]
}, function(player) {
player.addListener('start', setCompanions)
});
})
</script>
