VAST/VPAID Plugin by Nuevodevel.com

Ad Events Tracking

Code Setup

<!--Inset Viddeojs CSS into website Head tag-->
<link href="../videojs/skins/shaka/videojs.min.css" rel="stylesheet" type="text/css" />

<!--Load videojs and plugins -->
<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