Create an In-Stream Video Interactive in a Code Editor – Sizmek Help Center

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.

Creating an Ad Using a Sizmek Ad Suite Template

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:

VPAID-AdKit-1.0.zip

Included Files

The following table describes the list of files that are included in the downloadable template.

File Name	Description	Required
`index.html`	The entry point for the template. Provides the basic HTML structure for reference in `script.js` and `style.css`.	Required
`js/script.js`	Contains the logic for manipulating the HTML elements at runtime and interacting with the VPAID API.	Required
`css/styles.css`	Provides style information to the structure of `index.html`.	Optional (if code is included in the HTML file)
`images/logo.png`	An example image displayed in the template. When replacing or removing this file, make sure to address its references in `index.html` and `styles.css`.	Optional
`videos/preview.mp4`	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 `script.js`.	Optional

Setting up Your Ad in Sizmek Ad Suite

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.

Additional Resources

Shared Libraries

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.

Dynamic Creative Optimization

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.

Advanced Configuration

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.

VPAID Bridge API

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.

Methods and Properties

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.

Parameters

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)
```
Name

Description

eventType

Type of event as a String.

callback

Refers to a function that operates as an event handler.
removeEventListener: This function removes an event subscription previously added using the addEventListener 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.

Events

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.

Script.js

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.

Name	Description
`eventType`	Type of event as a String.
`callback`	Refers to a function that operates as an event handler.