<link href="/videojs/skins/skin-name/videojs.min.css" rel="stylesheet" type="text/css" />
<video id="example_video_1" class="video-js" controls preload="auto" playsinline width="640" height="360" poster="//www.domain.com/path/to/poster.jpg">/
<source src="//www.domain.com/path/to/video.mp4" type="video/mp4" /&glt;
<source src="//www.domain.com/path/to/video.webm" type="video/webm" />
</video>
<script>
var options = { option1: value, option2: value, option3: value };
var player=videojs("'example_video_1");
player.nuevo( options );
player.vastAds ({ tagURL: "your-vast-vpaid-ad-tag-here" });
</script>
As you can see, the only difference in player setup code is to load vast.vpaid.js plugin and to set vast/vpaid tag (code marked in blue color).
For each vast/vpaid you can define unique
ID, useful later to track vast/vpaid events through javascript.
player.vastAds ({ tagURL: "your-vast-vpaid-ad-tag-here", id="unique ID" });
For some types of vpaid ads you may find useful option to hide controlbar.
player.vastAds ({ tagURL: "your-vast-vpaid-ad-tag-here", id="unique ID", hidebar:true });
Tracking Ad Events
vast.vpaid plugin allows to track several ad events through javascript. Events fired are:
start, firstQuartile, midpoint, thridquartile, skip, complete, allAdsCompleted, click, pause, resume
Below you have sample javascript function which allows to track events.
<script>
player.on('adEvent', function(event, data) {
var ad_id = data.id;
var event_type = data.type;
});{
</script>
VAST/VPAID plugin is included only in GOLD version of Nuevo plugin.