PRODUCT
Follow

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 bundle.

Files within the Bundle:

Amz_InStreamVideoInteractive_1_0_0_DCO_AdditionalAssets

Amz_InStreamVideoInteractive_1_0_0.zip

Amz_InStreamVideoInteractive_1_0_0_DCO.zip

README.txt

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.

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.

Methods and Properties

adEventListner: Allows for VPAID to notify the ad about internal events. VPAID dispatches events related to the primary video state only.

adkit.vpaid.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.

adkit.vpaid.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 adkit.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.

adkit.vpaid.onVideoEvents(adkit.vpaid.VIDEO_EVENTS.PAUSE, function(event){
    adkit.vpaid.pause();
});   

play(): Resumes video playback or restarts video if video playback is finished.

Calling play() on a adkit.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.

adkit.vpaid.onVideoEvents(adkit.vpaid.VIDEO_EVENTS.PLAY, function(event){
     adkit.vpaid.play();
}); 

skipAd() : Calling skipAd() on adkit.vpaid object will stop the primary video and close the ad.

skip_btn.addEventListener("click", onClickSkip);

function onClickSkip(event) {
    adkit.vpaid.skipAd();
}

onSkipEnabled() : onSkipEnabled method is called when ‘Skip ad unit’ setting in the Ad Setup on SAS is activated and the playback position is reached to the seconds that defines in the setup. If the seconds set ‘0’, the ad will execute onSkipEnabled when it starts to play the primary video.

skipButtonSetting.jpg
skip_btn.style.visibility = "hidden";
adkit.vpaid.onSkipEnabled(function() {
    skip_btn.style.visibility = "visible";
});

muted: Indicates 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 adkit.vpaid.muted value affects the primary video only and will not propagate to other objects that handle sound, including the secondary video.

toggle_audio_btn.addEventListener("click", toggleAudio);

function toggleAudio(){    adkit.vpaid.muted = !adkit.vpaid.muted;

}

adkit.vpaid.onVideoEvents(adkit.vpaid.VIDEO_EVENTS.VOLUME_CHANGE, function(event){     toggle_audio_btn.innerHTML = adkit.vpaid.muted ? "unmute" : "mute";
});

Note

Note: A user can take advantage of config.js to configure or add an attribute (width, height, left or top). This moves the bounding box for the video that displays behind/beneath the ad and doesn't alter the full ad/player size nor will it crop the video. This should be used carefully and only when needed, as not to run the risk of providing any incorrect values.

Example:

define({
    "vpaid": {
        "primaryVideo": {
            "sources": [1],
            "designModeVideoUrl": "videos/video.mp4",
            "width": 1280,
            "height": 720, 
            "top": 0,
            "left": 0
        }
    }
});

Setting the primary video with a dynamic value

Note

Note: 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.

VPAID API contains configure method that sets initial ad configuration values. Via this configuration, you can get the primary video from DCO elements. This function should be called once; subsequent calls are ignored.


The following table describes the properties of the object for the configuration values.

Name

Description

primaryVideoId

ID of additional asset for the primary video. The value is either integer or string.

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.

Events

A VPAID instance dispatches all events that the <video/> tag handles at the time that the tag dispatches them. Here is a list of video events that our VPAID API supports.

Event Name

Description

abort

Fires when the loading of the video is aborted

canplay

Fires when the ad can start playing the video

canplaythrough

Fires when the ad can play through the video without stopping for buffering

durationchange

Fires when the duration of the video is changed

error

Fires when an error occurred during the loading of the video

loadeddata

Fires when the ad has loaded the current frame of the video

loadedmetadata

Fires when the ad has loaded meta data for the video

loadstart

Fires when the ad starts looking for the video

pause

Fires when the video has been paused

play

Fires when the video has been started or is no longer paused

playing

Fires when the video is playing after having been paused or stopped for buffering

seeked

Fires when the user is finished moving/skipping to a new position in the video

suspend

Fires when the ad is intentionally not getting media data

timeupdate

Fires when the current playback position has changed

volumechange

Fires when the volume has been changed

waiting

Fires when the video stops because it needs to buffer the next frame

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.

Demo

Click here to preview a demo of In-Stream Video Interactive format.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments