Now Nuevodevel presents experimental VAST/VPAID plugin dedicated for video.js player with Nuevo plugin and skin.The plugin implements IAB specifications of VAST 3, VAST 4 for linear ads (rendered through VAST 3) and VPAID. Since flash playback is depreciated for video.js player, the plugin supports only HTML5 ads. The plugin does not support VMAP specification, however allows to play a set of linear ads at desired time position. Eaach player skin by Nuevodevel was individually designed for VAST/VPAID ads. The basic single VAST/VPAID ad setup is fairly simple.
Code snippet
Load player skins css stylesheet in website HEAD or BODY element.
<link href="/videojs/skins/skin-name/videojs.min.css" rel="stylesheet" type="text/css" />
Load player, vast/vpaid and nuevo plugin js
<script src="/videojs/video.min.js"></script>
<script src="/videojs/plugins/vast.vpaid.min.js"></script>
<script src="/videojs/nuevo.min.js"></script>
Setup HTML5 video to play
<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>
Initialize player and plugins
<script>
var options = { option1: value, option2: value, option3: value }; Nuevo plugin options
var player=videojs("'example_video_1");
player.nuevo({ options });
Setup VAST/VPAID adplayer.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.