<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>
Timeouts
Vast/vpaid plugin makes use of several timeouts, two of which are crucial. Ad request timeout is used to connect with ad XML Url. Ad cancel timeout is time after which the ad is cancelled.
For both timeouts the value is 3000 ms (3 seconds). This is enough for most uses, but may not be enough for a slow 3G connection. The plugin includes options to change both timeouts in easy way.
player.vastAds ({ tagURL: "your-vast-vpaid-ad-tag-here"}, {adRequestTimeout:5000,adCancelTimeout:10000}});
VAST/VPAID plugin is included only in GOLD version of Nuevo plugin.