PRODUCT
Follow

 Overview

Introduction and Screenshots

The Sizmek Out-Stream Player Ad Feature allows advertisers to add a VAST video player to their creative to facilitate the playback of VAST tags. This Ad Feature expands the reach of In-Stream beyond the finite in-player inventory by enabling its use in-page, as well as enabling VAST ads to be used in place of regular video assets where desired, for simplified workflow or enhanced reporting. 

The Out-Stream Player works in tandem with the Sizmek Video Module and tracks all video metrics including Play, Pause, Replay and Quartiles. 

Please note: While an update is coming soon that will support VPAID, the current version does not support VPAID ads. 

While the Out-Stream Player Ad Feature can be used with any format, this Ad Feature comes with the following three templates:

  • Polite Banner: Polite Banner including a static sized Out-Stream Player
  • HTML5 Pushdown: The HTML5 Pushdown with responsive panels. Loads an Out-Stream Player that resizes with the panel.
  • Responsive Rich Media Banner: The Responsive Rich Media Banner. Loads an Out-Stream Player that resizes with the banner.

 

Below: On the left, we have a 300x250 Polite Banner displaying the Out-Stream Player with a Vast ad complete with Advertisement controls and on the right the content video with standard controls.

outstream_1.jpg   outstream_2.jpg 

Below: The HTML5 Pushdown showing the ad at different sizes and the Out-Stream Player with both Advertisement and standard controls 

pushdown.jpg  pushdown1.jpg

Below: The Responsive Rich Media Banner showing the ad at different sizes and the Out-Stream Player with both Advertisement and standard controls. 

rrmb_1.jpg rrmb.jpg

Demos/Downloads

The following table provides links to the template and demo for the HTML5 Out-Stream Player Ad feature.

Template

Sizmek_Outstream_Player_1_0_1.zip

Demo

Preview Demo

Supported Platforms

Platform

Supported Version

Windows

Internet Explorer 10+, Edge, Firefox, Chrome

Mac

Chrome, Safari

iPhone

iOS 9.0 and later

iPad

iOS 9.0 and later

Android

Android 4.4 and later ( including tablets)

Assets

Workspaces Available

The Out-Stream Player Ad Feature includes three HTML5 Workspace templates: Polite Banner, 
HTML5 Pushdown, and Responsive Rich Media Banner.

Included Workspace Files

Polite Format

File Name 

Description

config.js

Sizmek Ad Manifest file

images/DefaultImage300x250.gif

Demo Default Backup image

index.html

Demo HTML index file

scripts/outstreamPlayer.js

Ad Feature Javascript file

scripts/video.min.js

Video JS Supporting Javascript file

scripts/videojs_5.vast.vpaid.js

Video JS VAST Pluging Supporting Javascript file

styles/style.css

Demo Stylesheet

styles/video-js.min.css

Video JS Supporting CSS file

styles/videojs.vast.vpaid.min.css

Video JS VAST Plugin Supporting CSS file

videos/1x1.mp4

Ad Feature default video file  

videos/sizmek.mp4

Demo video file  

 HTML5 Pushdown

File Name 

Description

config.js

Sizmek Ad Manifest file

images/backup_1x1.jpg

Format Default Backup image

images/logo.png

Format Logo Image

panels/expandAuto/images/logo.png

Format Panel logo image

panels/expandAuto/index.html

Format Panel HTML index file

panels/expandAuto/scripts/script.js

Format Panel Javascript file

panels/expandAuto/styles/style.css

Format Panel Stylesheet

panels/expandUser/config.js

Sizmek Manifest file

panels/expandUser/images/logo.png

Format Panel logo image

panels/expandUser/index.html

Template Panel HTML index file

panels/expandUser/scripts/outstreamPlayer.js

Outstream Player Javascript file

panels/expandUser/scripts/script.js

Format Panel Javascript file

panels/expandUser/scripts/video.min.js

Video JS Supporting Javascript file

panels/expandUser/scripts/videojs_5.vast.vpaid.min.js

Video JS VAST Pluging Supporting Javascript file

panels/expandUser/styles/style.css

Format Panel Stylesheet file

panels/expandUser/styles/video-js.min.css

Video JS Supporting CSS file

panels/expandUser/styles/videojs.vast.vpaid.min.css

Video JS VAST Plugin Supporting CSS file

panels/expandUser/videos/1x1.mp4

Ad Feature default video file  

panels/expandUser/videos/sizmek.mp4

Demo video file   

scripts/localPreview.js

Format Local Preview Support JS

scripts/script.js

Format Banner Javascript

styles/reset.css

Format Reset Stylesheet

styles/style.css

Format Stylesheet


Responsive Rich Media Format

File Name 

Description

config.js

Sizmek Ad Manifest file

images/background.jpg

Format Background image

images/default.jpg

Format Default Backup image

images/logo.png

Format Logo image

images/poster.jpg

Video Poster Image

index.html

Demo HTML index file

scripts/localPreview.js

Format Local Preview Support JS

scripts/outstreamPlayer.js

Ad Feature Javascript file

scripts/script.js

Format Javascript File

scripts/video.min.js

Video JS Supporting Javascript file

scripts/videojs_5.vast.vpaid.js

Video JS VAST Pluging Supporting Javascript file

styles/reset.css

Format Reset Stylesheet

styles/style.css

Format Stylesheet

styles/video-js.min.css

Video JS Supporting CSS file

styles/videojs.vast.vpaid.min.css

Video JS VAST Plugin Supporting CSS file

videos/1x1.mp4

Ad Feature default video file  

videos/sizmek.mp4

Demo video file  


Implementing the Ad Feature

Getting Started

Before you begin, make sure you have the following resources available:

  • Outstream Player Ad Feature files
  • VAST tag
  • Video file (optional)

Add the Out-Stream Player Ad Feature to Your Workspace Code

The following steps illustrate how to add the Out-Stream Player Ad Feature to your creative Workspace. Please note that additional steps may be necessary depending on the Format being used. 

Procedure
  1. Include the Outstream Player and VideoJS Stylesheets in the head of your Workspace index.html file:
  <link type="text/css" rel="stylesheet" href="styles/video-js.min.css"/>
  <link type="text/css" rel="stylesheet" href="styles/videojs.vast.vpaid.min.css"/>
  <link type="text/css" rel="stylesheet" href="styles/style.css"/>  
  1. Include the Outstream Player and VideoJS Javascript files in the head of your Workspace index.html file:
    <script type="text/javascript" src="scripts/outstreamPlayer.js"></script>
    <script type="text/javascript" src="scripts/video.min.js"></script>
    <script type="text/javascript" src="scripts/videojs_5.vast.vpaid.js"></script>
  1. Include the EBAPI and EB Video Module in the head of your Workspace index.html file. Make sure to place this before loading Adkit:
    <script>  EBModulesToLoad = ['Video', 'EBAPI']; </script>
  1. Add the following Javascript detailing your Outstream Player config object. Update parameters as needed (see Outstream Parameters before for descriptions). 
    <script>
        var config = {
            container: 'videoContainer',
	    content: 'videos/videoFile.mp4',
	    vastTag: 'https://bs.serving-sys.com/XXXXXXX/XXXXXXXXXXXX&ord=[rand]',
            autoPlay: true,
	    preroll: true		
	};
    </script>
  1. Instantiate and pass the config object to the Out-Stream Player script.
    <script>
        var outstream = new OutstreamPlayer(config);
    </script>
  1. Add listeners to the index.html file to listen for outstream player events if needed. Make sure to add supporting methods.
    <script>
        outstream.addEventListener("Video_Play", onVideoPlay, false);
        outstream.addEventListener("Video_Pause", onVideoPause, false);
    </script>

Outstream Parameters

Parameter

Type

Description

container

String

The ID of the div you want to load to your Out-Stream Player.

content

String

The file path of the content video you want to play.

vastTag

String

Your VAST tag

autoPlay

Boolean

true or false: If set to true, the video player will auto play.

isMuted

Boolean

true or false: If set to true, the player will start in the muted state.

playInline

Boolean

true or false: If set to true, for iOS devices 10 or greater, the video will play inline instead of using the native video player

playOnVisible

Boolean

true or false: If set to true, the player will use visibility metrics to play or pause the video based on whether the ad is visible to the user.

visibilityThreshold

Number

Sets the threshold for which playOnVisible will either play or pause the video player

preroll

Boolean true or false: If set to true, the player will include a preroll ad

postroll

Boolean true or false: If set to true, the player will include a postroll ad

midrolls

Array

An Array of timestamps in seconds, that indicates when a midroll will fire. Once the midroll is complete, the content video will continue.

ex: [15, 30]

In this example, two midroll ads will play, one at 15 seconds and one at 30 seconds

aspectRatio

String

Common video aspect ratios you wish to have your player conform to. The value should represent a ratio - two numbers separated by a colon (e.g. "16:9" or "4:3")

Available Methods

When building the HTML for your custom template, use the following methods to control your Out-Stream player.

Method Name

Parameters

Description

play

none

Play the video player

pause

none

Pause the video player

enterFullscreen  none

instruct the player to enter full screen mode

exitFullscreen  none

instruct the player to exit full screen mode

dispose  none

destroy the video player and remove all elements and listeners from page

create  none

create a new video player


Available Events

Event Name

Description

Video_Play

Fires when player plays

Video_Pause

Fires when player pauses

Video_Seeking

Fires when user is seeking through the video

Video_Seek_End

Fires when user stops seeking through the video

Video_Duration_Change

Fires on every second while player is in play mode and the duration of the video changes

Volume_Change

Fires when the player's volume is changed

Time_Update

Fires on every second while player is in play mode and the duration of the video changes

Meta_Data

Fires when video meta data is loaded

First_Play

Fires on the vast ad first preroll play

Vast_Content_Start

Fires when the content video starts

Ad_Start

Fires when the VAST ad starts

Ad_Skip

Fires if the VAST ad is skipped

Ad_End

Fires when the VAST ad ends

Ad_Error

Fires when there is an error trying to play the VAST tag

Ad_Cancel

Fires when the VAST ad finishes

Ad_Clickthrough

Fires when user clicks on ad

 

Common Customizations

The Out_Stream Player Ad Feature comes with three templates; the Polite Banner, the Responsive Rich Media Banner, and the HTML5 Pushdown. The following setups display the initial settings for the Custom Variables used for the Responsive Rich Media Banner and the HTML5 Pushdown demos. 


Responsive Rich Media Banner

MDX 2.0

Sizemk Advertising Suite

Value

mdAdaptiveBreakpoints Adaptive Breakpoints

300,600,900,1200

mdAlignment Alignment

center

mdAnimateResize Animate Resize

No

mdAspectRatio Aspect Ratio

undefined

mdAutoHeightThreshold Auto Height Threshold

1

mdAutoRepositionInterval Auto Reposition Interval

0

mdBackupImgPath Backup Img Path

undefined

mdFixedHeight Fixed Height

0

mdFixedWidth Fixed Width

0

mdHeightDependency Height Dependency

advertiserDiv

mdMaximumHeight Maximum Height

0

mdMaximumWidth Maximum Width

0

mdMinimumHeight Minimum Height

0

mdMinimumWidth Minimum Width

0

mdParentLevelsToResize Parent Levels To Resize

0

mdProgEnable Prog Enable

No

mdProgSettingsFolderPath Prog Settings Folder Path

//services.serving-sys.com/programmatic/DomainList/

mdResizeBehavior Resize Behavior

responsive

mdResizeFriendlyIframe Resize Friendly Iframe

No

mdWidthDependency Width Dependency

advertiserDiv

 

HTML5 Pushdown

MDX 2.0

Sizmek Advertising Suite

Value

mdEasingType Easing Type

ease-in-out

mdAnimationDuration Animation Duration

1

mdIsFullscreen? Is Fullscreen?

No

mdAutoRepositionInterval Auto Reposition Interval

0

mdAutoCollapseTimer Auto Collapse Timer

8

mdeyeDivZIndex eyeDiv ZIndex

undefined

mdAutoPanelName Auto Panel Name

expandAuto

mdUserPanelName User Panel Name

expandUser

mdAutoPanelType Auto Panel Type

pushdown

mdUserPanelType User Panel Type

pushdown

mdInteractionsCancelAutoCollapse Interactions Cancel Auto Collapse

Yes

mdProgEnabled Prog Enabled

No

mdProgSettingsFolderPath Prog Settings Folder Path

//services.serving-sys.com/programmatic/DomainList/

mdHideScrollbarsOnExpand Hide Scrollbars On Expand

Yes

mdEnableSDKDefaultCloseButton Enable SDK Default Close Button

No

mdPanelHeightDependency Panel Height Dependency

adaptive

mdPanelAspectRatio Panel Aspect Ratio

4:3

mdBannerSizeInheritance Banner Size Inheritance

browserWidth

mdMaximumBannerWidth Maximum Banner Width

-1

mdMinimumBannerWidth Minimum Banner Width

-1

mdBannerAdaptiveBreakpoints Banner Adaptive Breakpoints

300:50,500:90,749:120

mdAutoPanelBreakpoints Auto Panel Breakpoints

300:200,500:300,749:400

mdUserPanelBreakpoints User Panel Breakpoints

300:300,500:400,749:500

mdBannerFixedWidth Banner Fixed Width

320

mdBannerFixedHeight Banner Fixed Height

50

mdAutoPanelFixedHeight Auto Panel Fixed Height

415

mdUserPanelFixedHeight User Panel Fixed Height

415

mdBackupImagePath Backup Image Path

undefined

mdParentLevelstoResize Parent Levels to Resize

0

 

Setting up the Out-Stream Player Ad Feature in the Sizmek Platforms

Sizmek MDX2.0 Platform Setup

Archive the Out-Stream Player Ad Feature workspace into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.

  1. Zip the Workspace folder.
  2. Log into the MDX2.0 platform.
  3. Click Manage > Creative Assets, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. From the main menu, select Shortcuts > Create New Ad > Create a New Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the format type list.
  8. Choose the HTML5 Workspace Folder you uploaded to the platform.
  9. Save

Sizmek Sizmek Advertising Suite Setup

  1. Zip the Workspace folder.
  2. Log in to the Sizmek Advertising Suite.
  3. Click Creative Asset Library, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. Click Creative >Ads. Then, click New Ad and select New Master Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the Ad Format list.
  8. Under Main Assets select the Workspace folder and default image.
  9. Save

Video JS and Supporting Plugins

The Out-Stream Player Ad Feature uses the open source Javascript Player Framework VideoJS and its supporting plugin for Vast support. For more information regarding this framework, visit the VideoJS website: http://videojs.com/

The Workspaces provided include two Javascript and two Stylesheets includes that support the VideoJS library and Vast plugins. These files point to Sizmek Shared Library servers and will appear in your network activity when loading your creative. 

 

Known Issues

  1. Does not support VPAID.
  2. In IOS, native Android and Samsung browsers, autoplay is not available.
  3. In IE, Firefox and Edge browsers, a "syntax error" may fire in the console when loading Vast tags
  4. In Android native browser on Android OS v4.1 to v4.3 on resolutions smaller than 350px width, video controls may be misaligned. 
  5. May get error message in Chrome when Vast ad plays
    • index.html?v=_2_84_1_0&n=1&r=_1_39_0_0:1 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
       
  6. In IE and edge, the play head may temporarily overlap with the "Advertisement" label or volume head.
  7. Fullscreen does not work in native Android browsers 4.4 and below.
  8. playOnVisible option is not supported on native Android browsers 4.4 and below
  9. VideoJS throws a non-critical TypeError when clicking on the centered big play button 

 

Change Log 

November 8, 2018

1.0.1 - Update to videojs_5.vast.vpaid.min.js, which now allows ajax calls without credentials. Fixes issue where vast tags would not load from domains without proper CORS settings.  

September 11, 2017

Initial Release - Out-Stream Player allows for playback of Vast tags in HTML5 creative while tracking video metrics in a responsive player.

 

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

Comments