Demo: Vast

VAST delivered Ads with companions

IMPORTANT NOTICE: This page uses a demo version of the Projekktor Vast Plugin for your testing pleasure. All tracking- and clickthrough- functionality has been removed.

The full 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.

As the whole player UI can be re-styled via CSS (the player gets a new css-class) your possibilities to customize its look on ad-playout are legion. The given one is just a functional example.

placeholder companion ad 790x90
placeholder companion ad 300x60
placeholder companion ad 300x250

Test your VAST feed

Enter a custom VAST URL for testing. If no ads show up the provided ad- or media- format is either not supported by your client or your adblocker is enabled and the script was not able to detect it.

As the whole plugin is implemented in Javascript CORS issues may apply. To bypass them this page offers a proxy option for further testing. This technique is NOT RECOMMENDED FOR PRODUCTIVE environments but just for testing. While using the proxy and as the projekktor.com server is located in Germany possible geo blocking settings of a tested ad booking may take effect.

IMPORTANT NOTICE: This page uses a demo version of the Projekktor Vast Plugin for your testing pleasure. All tracking- and clickthrough- functionality has been removed.

Test this setup with your mobile device

QR-Code-Generator

This is cool, get me to the shop.

The Code

<div id="companionb" style="width:728px; height: 90px; margin: 5px; border: 1px solid #ccc">placeholder companion ad 790x90</div>
<div id="companionc" style="width:300px; height: 60px; margin: 5px; border: 1px solid #ccc">placeholder companion ad 300x60</div>
<div id="companiona" style="width:300px; height: 250px; margin: 5px; border: 1px solid #ccc; float: left;">placeholder companion ad 300x250</div>
<div id="player_a" class="projekktor"></div>
<div style="clear: both;"></div>

<script type="text/javascript">
jQuery(document).ready(function($) {
    function getURLParameter(name) {
        return decodeURI(
            (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
        );
    }
    
    var vastURL = 'http://ad3.liverail.com/?LR_PUBLISHER_ID=1331&LR_CAMPAIGN_ID=229&LR_SCHEMA=vast2';
    
    if (getURLParameter(vasturl)!="null") {
        vastURL = unescape(getURLParameter(vasturl));
    }
    
    var proxy = 'http://www.projekktor.com/wp-content/manual/proxy.php?url=';
    
    if (getURLParameter("proxy")=="null") {
        proxy = false;
    }

    var cr =  (getURLParameter("cr")=="null") ? false : true;
    
    var qrurl = escape("http://www.projekktor.com/wp-content/manual/demo-vast.php?proxy=" +  proxy +  "&vasturl=" + escape(vastURL) + "&cr=" + ((cr===false) ? 'false' : 'true'));

	$('#vasturl').val(vastURL);
	$('#cred').prop('checked', cr);
	$('#viaproxy').prop('checked', (proxy!==false));
	$('#qrlink').prop('href', unescape(qrurl));
	$('#qrimg').prop('src', "http://api.qrserver.com/v1/create-qr-code/?data=" + qrurl + "&#38;size=250x250&#38;prov=goqrme" );

    projekktor('#player_a', {       
    poster: 'http://www.projekktor.com/wp-content/manual/intro.png',
    playerFlashMP4: 'http://www.projekktor.com/wp-content/manual/jarisplayer.swf',
    playerFlashMP3: 'http://www.projekktor.com/wp-content/manual/jarisplayer.swf',
    addplugins: ['vastdemo'],
    width: 500,
    height: 282,    
    playlist: [
        {
        0:{src:'http://www.projekktor.com/wp-content/manual/intro.mp4', type:"video/mp4"},
        1:{src:'http://www.projekktor.com/wp-content/manual/intro.webm', type:"video/webm"},
        2:{src:'http://www.projekktor.com/wp-content/manual/intro.ogg', type:"video/ogg"},
        config: {
            plugin_vastdemo: {
                adblockCallback: function () {alert("Adblocker detected!");},
                title: 'Ad ',
                vastProxy: proxy,
                url: vastURL,
                type: 'application/xml',
                withCredentials: cr,
                prerollPauseOnClick: true,
                prerollSkip: 15,
                prerollSkipHtml: 'Skip ad in %{secs} seconds.'                       
            }                  
        }            
        
        }
    ]     
    }, function(player) {});
    
    
    
});
</script>
<h1>Test your VAST feed</h1>

<p>
    Enter a custom VAST URL for testing. If no ads show up the provided ad- or media- format is either not supported by your client
    or your adblocker is enabled and the script was not able to detect it.
</p>
<p>
    As the whole plugin is implemented in Javascript <a href="http://www.enable-cors.org">CORS</a> issues may apply.
    To bypass them this page offers a proxy option for further testing.
	This technique is NOT RECOMMENDED FOR PRODUCTIVE environments but just for testing.
    While using the proxy and as the projekktor.com server is located in Germany possible geo blocking settings of a tested ad booking may take effect.
</p>

<p style="background-color: #fff00c;" >
IMPORTANT NOTICE: This page uses a demo version of the <a href="http://shop.projekktorxl.com/shop/vast-ima/">Projekktor Vast Plugin</a> for your testing pleasure.
<b>All tracking- and clickthrough- functionality has been removed.</b>
</p>

<form role="form" method="get" action="http://www.projekktor.com/demos/vast">
	<label for="vasturl">Enter a custom VAST ad URL</label>
	<input id="vasturl" name="vasturl" value="" style="width: 100%" type="text"/>

	<div class="checkbox">
		<label>
			<input class="form-control" name="cr" id="cred" type="checkbox" value="true"/>
			with credentials?
		</label>
	</div>	
	
	<div class="checkbox">
		<label>
			<input name="proxy" id="viaproxy" type="checkbox" value="true"/>
			via proxy to bypass <a href="http://www.enable-cors.org">CORS</a> issues?
		</label>
	</div>
	
	<button type="submit" class="btn btn-default">Apply values (page refresh)</button>
</form>


<h1>Test this setup with your mobile device</h1>
<a id="qrlink" href="" style="border:0 none;cursor:pointer;text-decoration:none;"><img id="qrimg" src="" alt="QR-Code-Generator" title="" /></a>
<p style="text-align: center;">
    <a href="http://shop.projekktorxl.com/shop/vast-ima/" class="btn pink">This is cool, get me to the shop.</a>    
</p>