From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

VPAID In-Stream Ad

VPAID HTML5 Wrapper – wrapper adds VPAID 2.0 support for any standard HTML5 banner and provides API needed for VPAID.

VPAID (The IAB’s Video Player Ad-Serving Interface Definition) – establishes a common interface between video players and ad units, enabling a rich interactive in-stream ad experience.

VAST (Video Ad Serving Template) – XML document format describing an ad to be displayed in, over, or around a Video Player or a Wrapper pointing to a downstream VAST document to be requested.

VPAID Events and wrapper methods:

  • getAdWidth - get ad width
  • getAdHeight - get ad height
  • getAdSkippableState - get ad skippable state
  • getAdExpanded - get ad expanded state
  • getAdRemainingTime - get ad remaining time
  • getAdDuration - get ad duration
  • getAdCompanions - get ad companions
  • getAdIcons - get ad icons
  • getAdLinear - get linear ad
  • getAdVolume - get ad icons
  • getVPAIDAd - get vpaid object
VPAID Event VPAID Wrapper method
AdStarted adStart()
AdStopped stopAd()
AdSkipped skipAd()
AdLoaded adVideoStart()
AdSizeChange resizeAd(width, height)
AdExpandedChange expandAd()
AdVolumeChange setAdVolume()
AdClickThru adClick()
AdInteraction adInteraction()
AdVideoStart adVideoStart()
AdVideoFirstQuartile adVideoFirstQuartile()
AdVideoMidpoint adVideoMidpoint()
AdVideoThirdQuartile adVideoThirdQuartile()
AdVideoComplete adVideoComplete()
AdUserClose adUserClose()
AdPaused pauseAd()
AdPlaying adPlaying()

 

Examples:

Using VPAID methods:

// trigger click event towards player
dhtml.vpaid.adClick(dhtml.getVar('clickTAG'), true);

// get ad width
dhtml.vpaid.getAdWidth();

Triggering video events toward player:

dhtml.vpaid.callDHTMLEvent(eventId);

// pause video
dhtml.vpaid.callDHTMLEvent(31);

Available video event IDs:

ID Event name
31 Pause
37 Play/Resume
33 Mute
34 Unmute

 

Bind video to player:

In order to indicate current play time and duration video needs to be bound to video player. After bind video object can be accessed through dhtml.vpaid.video

var sources = dhtml.getVar('videoSources');
dhtml.vpaid.bindVideo(sources);

Closing ad:

closeButton.onclick = function() {
    dhtml.external.close && dhtml.external.close();
};

Listening for video events:

dhtml.vpaid.on('AdVolumeChange', function() {
  console.log('volume change');
});

 

For all available API methods and Events please check IAB VPAID specification