[Experimental] Instream Ads

Instream Advertising is the practice of playing video Ads within actual content, in response to a direct user action, rather than just passively/outside of/next to the content (which is known as "Outstream Advertising").

In the context of Overwolf, we have recently began testing of a new, Instream advertising format, which will show a video (with sound) directly within existing video players* in your App, before the video content itself (also known as "Preroll Advertisements").

* Any video player within the App that is fully controlled by the App (does not include any external video players embedded in the App, like Youtube, Twitch.tv, or existing video Ad Containers).

Below is a demonstration:

Technical Specification

Product Specification

The Overwolf Ads SDK allows you to easily create instream Ads for your App's video content, utilizing a container element.

*This container* MUST fit the following criteria:

• MUST be transparent, and pass user input through (except when an Ad is showing)
• MUST ALWAYS be bigger than 640x480 pixels (width/height respectively)
• MUST ALWAYS have the same size/location as the video player it is "related" to (even if the player is resized/moved)

*The App's video* (being played within the container) MUST fit the following criteria:

• MUST be longer than 5 seconds
• MUST ONLY start playing as a result of the user clicking a clearly defined "Play" button

Finally, the *Instream Ad* itself will ALWAYS comply with the following:

• ALWAYS acts as a Preroll Ad to any individual video content
• ALWAYS starts with sound turned on (users can mute it while it plays)
• SOMETIMES is skippable (with full lengths usually ranging between 15-30 seconds)
• SOMETIMES is unskippable (with lengths usually ranging between 5-30 seconds)

Code Specification

OwAdInstream
/** The properties used for Instream Ads */
type InstreamAdProperties = ⯆{
  /** Is this an instream Ad. Set to true for this set of properties */
  instream: true,
  /** The duration of the video this instream Ad will be played in */
  streamDurationMs: number,
  /**
   * The number of the video this instream Ad will be played in in the current session
   * 
   * For example:
   * - The first video in a session will be `1`.
   * - The second video in a session will be `2`.
   * - The `n`th video in a session will be `n`.
   */
  streamVideoCount: number,
  /**
   * The volume that should be used for the instream Ad (between 0 and 1, defaults to 1)
   * 
   * Note - If the volume is set to 0, no Ad will be played
   */
  volume?: number
/** Is this an instream Ad. Set to true for this set of properties */
instream: true,
/** The duration of the video this instream Ad will be played in */
streamDurationMs: number,
/**
 * The number of the video this instream Ad will be played in in the current session
 * 
 * For example:
 * - The first video in a session will be `1`.
 * - The second video in a session will be `2`.
 * - The `n`th video in a session will be `n`.
 */
streamVideoCount: number,
/**
 * The volume that should be used for the instream Ad (between 0 and 1, defaults to 1)
 * 
 * Note - If the volume is set to 0, no Ad will be played
 */
volume?: number
}
// The type of an Overwolf Instream Ad
type OwAdInstream = ⯆{
  /** The OwAd constructor */
  constructor: ⯆(
    options: InstreamAdProperties
    options: InstreamAdProperties
) => OwAdInstream,
  /*
   * Whenever one of these events is fired, it indicates that the Video Ad is done,
   * and the underlying video should start playing
   */
  /** Event fired when a video Ad is skipped before completion */
  video_ad_skipped: (
    
    
) => void,
  /** Event fired when a video Ad is fully completed */
  complete: (
    
    
) => void
/** The OwAd constructor */
constructor: ⯆(
  options: InstreamAdProperties
options: InstreamAdProperties
) => OwAdInstream,
/*
 * Whenever one of these events is fired, it indicates that the Video Ad is done,
 * and the underlying video should start playing
 */
/** Event fired when a video Ad is skipped before completion */
video_ad_skipped: (
  

) => void,
/** Event fired when a video Ad is fully completed */
complete: (
  

) => void
}

Example Implementation

Assuming the following element structure:

Component Structure

video-content # Controlling the size of all children, who are overlaid on top of eachother
├── video-player # The actual video player
├── instream-container # A transparent, passthrough div to contain the instream Ad

The following code should work:

Example Implementation

// Get the container for the Instream Ad Container
const containerElement = document.getElementById(/* 'instream-container' */);

// Create the instream Ad
const instream = new OwAd(containerElement, {
  instream: true,
  streamDurationMs: 10000,
  streamVideoCount: 1,
  volume: 1,
} as InstreamAdProperties)

// Add relevant event listeners.
instream.addEventListener('video_ad_skipped', () => {
  // onAdSkipped();
  shutdown();
});
instream.addEventListener('complete', () => {
  // onAdCompleted();
  shutdown();
});

// The command to shut down the instream Ad once it's been played.
const shutdown = () => instream.shutdown();

Further Reading

Instream Ads, as well as all other Overwolf Ads, are based on IAB standards, which you can read more about here