Note
Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About In-Stream Video Interactive.
When creating a In-Stream Video Interactive in a code editor, it is recommended that you start with our official template, which is available here:
The following table describes the list of files that are included in the downloadable template.
File Name |
Description |
Required |
---|---|---|
|
The entry point for the template. Provides the basic HTML structure for reference in |
Required |
|
Contains the logic for manipulating the HTML elements at runtime and interacting with the VPAID API. |
Required |
|
Provides style information to the structure of |
Optional (if code is included in the HTML file) |
|
An example image displayed in the template. When replacing or removing this file, make sure to address its references in |
Optional |
|
A video that can be used while testing locally without depending on SAS. When replacing or removing this file, make sure to address its references in |
Optional |
After you finish creating your ad, proceed to setting up your ad in SAS. For more information, see Set up an In-Stream Video Interactive.
If you are developing ads with 3rd party libraries, we recommend that you call these libraries from a CDN (Content Delivery Network) when possible. This will help improve loading time and caching.
Note
Note: VPAID only supports dynamic elements for assets that are not the main video file. To build DCO for the main video, consider using a VAST ad. If you need to add dynamic creative optimization (DCO) elements to your creative, see Add Dynamic Elements to Your HTML Ads Using a Code Editor.
The following tables provide additional variables, functions, and methods that are available for this format. You can use these additional items to fully customize your ad.
The creative must load the EBVPAID.js
that operates as a bridge between the ad, the JavaScript client, and the video player that serves the ad. For more information about loading functionality, see the Script.js section. Once EBVPAID.js
loads, it writes the variable VPAID
to the current window. The VPAID
variable is a bridge API instance that can be accessed by the ad.
VPAID Bridge exposes following functions and properties.
configure(configObject:Object)
Calling this method sets initial ad configuration values. This function should be called once; subsequent calls are ignored.
-
configObject
: Object that contains configuration values. The following table describes the properties the object might include.Name
Description
primaryVideoId
ID of the primary video asset as integer.
This property and valid value are mandatory. Failure providing of this property will result in unusable ad.
Value of
primaryVideoId
can be passed only once. Subsequent calls are ignored.designModeVideoUrl
URL to video displayed in
Design mode
. This parameter is optional.Value can be provided as a relative URL to local video asset or as a fully qualified URL.
If a value is not provided, the video will not be rendered in
Design mode
.The presence of value does not affect runtime video display. There is no need to remove the value when published ads.
closeButton
Reference to HTML element that acts as ad close button.
If a value is omitted or the value is null, VPAID will draw default close button.
skipButton
Reference to HTML element that acts as ad skip button.
This parameter is optional. There is no default skip button in the current VPAID iteration.
-
addEventListener
: Allows for VPAID to notify the ad about internal events. VPAID dispatches events related to the primary video state only.addEventListener(eventType:String, callback:Function)
-
removeEventListener
: This function removes an event subscription previously added using theaddEventListener
function.removeEventListener(eventType:String, callback:Function)
Name
Description
eventType
Type of event as a String.
callback
Refers to a function that operates as an event handler.
-
pause()
: Pauses primary video playback.Calling
pause()
on a VPAID object will not have an effect other than pausing the primary video. It will not pause any other HTML sound or animation in the ad outside of the primary video file. -
play()
: Resumes video playback or restarts video if video playback is finished.Calling
play()
on a VPAID object will not have an effect other than playing or resuming the primary video. It will not restart any other HTML sound or animation in the ad outside of the primary video file. -
muted
: Determines whether the sound is muted.True: Primary video will be muted (volume set to zero).
False: Primary video will be unmuted (volume will be set to user-preferred volume).
Changing the
VPAID.muted
value affects the primary video only and will not propagate to other objects that handle sound, including the secondary video.
A VPAID instance dispatches all events that the <video/>
tag handles at the time that the tag dispatches them. For more information, see W3C references: http://www.w3schools.com/tags/ref_av_dom.asp.
The script.js
file in the template is designed as self-sufficient and the only JavaScript code that manages all template functionality. Ad developers are encouraged to preserve this structure, if possible, to avoid possible inadvertent changes that may negatively affect core JavaScript functionality. Code in the file is thoroughly documented. Comments and the build guide mutually complement each other.
Comments