VAST/VPAID Plugin by Nuevodevel.com

Ad Events Tracking

Code Setup


<!--Load skin css, videojs and plugins inside <body> tag-->
<link href="../videojs/skins/shaka/videojs.min.css" rel="stylesheet" type="text/css" />

<script src="../videojs/video.min.js"></script>
<script src="../videojs/plugins/vast.vpaid.min.js"></script>
<script src="../videojs/nuevo.min.js"></script>

<!--Video tag setup-->
<video id="player_1" class="video-js vjs-fluid" controls preload playsinline poster="images/poster.jpg">
	<source src="//devnuevo.com/media/video/demo_720.mp4" type="video/mp4">
	<source src="//devnuevo.com/media/video/demo_720.webm" type="video/webm">
</video>

<!--Initialize player and Nuevo pluging-->
<script>
	var player = videojs('player_1');
	player.nuevo({ 
		//option1: 'value',
		//option2: 'value'
	});

	<!--Initialize VAST/VPAID Ads-->
	player.vastAds ({ tagURL: "vast/spotx.xml", id:"Ad001" });

</script>

How to track ad events

<script>
player.on('adEvent', function(event, data) {
	var adId = data.id;
	var eventType = data.type;
});
</script>

Multiple VAST/VPAID ads

<script>
player.vastAds ([
   {tagURL: "preroll-1-ad-tag-url", id: 'x01'},
   {tagURL: "preroll-2-ad-tag-url", id: 'x02'},
   {tagURL: "midroll-1-ad-tag-url", id: 'x03', timeOffset:"00:15"},
   {tagURL: "midroll-2-ad-tag-url", id: 'x04', timeOffset:'00:15'},
   {tagURL: "postrol-ad-tag-url", id: 'x04', timeOffset:'end'}
]);
</script>

It is required to setup proper CORS (Cross-Origin Resource Sharing) configuration on server to enable cross-site HTTP requests.
Implementing the request headers to set up CORS correctly depends on the language and framework of the backend.
More information about enabling CORS you can find on https://enable-cors.org