Video Resizer - Sizmek Ad Feature

Si
z
mekAdFeat
ur
e
Vi
deoRes
i
z
er
HTML
5Bui
l
dGui
de
Table of Contents
Overview ................................................................................................................................................................2 Supported Platforms ....................................................................................................................................................... 4 Demos/Downloads .......................................................................................................................................................... 5 Known Issues.................................................................................................................................................................... 5 Included Files ........................................................................................................................................................6 Implementing the Ad Feature ............................................................................................................................8 Configuring the HTML5 Video Resizer Ad Feature ..................................................................................................... 8 Setting Up the Ad Feature in Sizmek MDX ................................................................................................................. 10 Sizmek
Overview
The HTML5 Video Resizer Ad Feature enhances the video viewing experience by allowing the user to expand
and retract an in-banner video, while maintaining the video’s quality and aspect ratio. While the video is
playing, the user can drag the arrow to resize the video to their preferred size. Additionally, they can doubleclick the arrow to automatically expand the video to its largest size, and double-click again to retract the video
to its initial size.
The HTML5 Video Resizer utilizes an ad level Custom Script to communicate positioning data to the ad creative,
which can be found here:
http://ds.serving-sys.com/burstingres/CustomScripts/PL_HTML5_Video_Resizer.js
This Ad Feature contains two (2) templates:
1. Desktop Template
2. Mobile Compatible Template – works on both Mobile and Desktop platforms.
Copyright © 2015 Sizmek. All rights reserved.
2
Sizmek
Copyright © 2015 Sizmek. All rights reserved.
3
Sizmek
Supported Platforms
Platform
Supported Version
Windows
Internet Explorer 9+, Firefox, Chrome, Safari
Mac
Firefox, Chrome, Safari
Platform
Supported Version
iPad
iOS 5.0 and later
Android
Android 5 and later( including tablets)
Copyright © 2015 Sizmek. All rights reserved.
4
Sizmek
Demos/Downloads
To download the Ad Feature, view a demo, or get the latest copy of the build guide, please visit the Ad Features
page on Sizmek Showcase. For more information, contact your Creative Development Specialist.
Known Issues
•
•
Slight flicker on older machines on iFrame resize. Occurs on Mousedown and Mouseup. Mute attribute does not work with Safari iOS, therefore Mobile version does not include mute button
on mobile devices.
Copyright © 2015 Sizmek. All rights reserved.
5
Sizmek
Included Files
Desktop Template
Filename
Description
css/feature_styles.css
Sizmek Feature Stylesheet
images/DefaultImage400x300.gif
Sizmek Feature default image and demo background
images/draghandle.png
Image for drag button.
images/mute.png
Image for video mute button
images/mute2.gif
Image for video unmute button
images/poster.gif
Video poster image.
index.html
Sizmek Feature HTML file.
js/videoResizer.js
Sizmek Feature Javascript file that
video/sizmek.mp4
Sizmek Feature video asset
Mobile Compatible Template
Filename
Description
css/feature_styles.css
Sizmek Feature Stylesheet
images/DefaultImage400x300.gif
Sizmek Feature default image and demo background
images/draghandle.png
Image for drag button.
images/mute.png
Image for video mute button
images/mute2.gif
Image for video unmute button
images/poster.gif
Video poster image.
index.html
Sizmek Feature HTML file.
js/videoResizer.js
Sizmek Feature Javascript file that
Copyright © 2015 Sizmek. All rights reserved.
6
Sizmek
js/jquery-1.10.2.js
JQuery file, allows Ajax calls to image upload service
js/jquery-ui.js
JQuery file that allows drag features
js/jquery.ui.touch-punch.min.js
JQuery file, allows for mobile touch features
video/sizmek.mp4
Sizmek Feature video asset
Copyright © 2015 Sizmek. All rights reserved.
7
Sizmek
Implementing the Ad Feature
Before you begin, make sure you have the following resources available:
•
•
•
Video Resizer Ad Feature files Video Link to Custom Script Configuring the HTML5 Video Resizer Ad Feature
The HTML5 Video Resizer Ad Feature lets the developer add functionality to their video, which allows users to
scale the video across the full width and height of the window. The video is scaled by width and centered within
the video container div. Ad Feature settings can be configured by editing the parameter values in the
feature_config object, located in the index.html file of each template. Please note: Only the Mobile Compatible
version requires jquery plugins. Some file paths have been shortened for simplification.
1. Add EB Video Module and EBLoader .js. You must load the video module before loading EBLoader.js
<script type="text/javascript"> EBModulesToLoad = ['Video']; </script>
<script type="text/javascript" src="EBLoader.js"></script>
2. Add jQuery (mobile version only), feature script and styles. Mobile Version is listed below.
<script
<script
<script
<script
src="js/jquery-1.10.2.js"></script>
src="js/jquery-ui.js"></script>
src="js/jquery.ui.touch-punch.min.js"></script>
type="text/javascript" src="js/videoResizerMobile.js"></script>
<link type="text/css" rel="stylesheet" href="css/feature_styles.css"/>
3. Add new Div to creative to hold Video. As the video is resized it will be centered within this div. If the
height/width ratio does not match the original height and width, the video will be cropped and the overflow will
be hidden by the borders of this div.
Copyright © 2015 Sizmek. All rights reserved.
8
Sizmek
<div id="video"></div>
4. Add Config Object and Instantiate Ad Feature script. Descriptions of each parameter are listed in the
following section.
<script type="text/javascript">
var videos = [[ 'video/sizmek.mp4', 'video/mp4' ]];
var feature_Config = { options: {
adContainer: 'ad',
divId: 'video',
videoFiles: videos,
posterFile: 'images/poster.gif',
autoPlayVideo: false,
maxWidth: 900,
maxHeight: 500
}};
var videoResizerMobile= new videoResizerMobile(feature_Config);
</script>
Config object options:
Property Name
Description
videos
Array – Enter video name and corresponding file
type for each video you want to be added to your
video tag. Required.
adContainer
String – Id of the div you want the video to size
to. Required.
divId
String - Id of the div you want the video to be
added to. Required.
videoFiles
Array - Enter var name of video array. Default is
‘videos’. Required.
Copyright © 2015 Sizmek. All rights reserved.
9
Sizmek
posterFile
String - Enter location of video Poster image.
autoPlayVideo
Boolean - Enter true or false for auto play video.
maxWidth
Number – Enter the maximum width of expanded
video allowed.
maxHeight
Number – Enter the maximum height of
expanded video allowed.
Setting Up the Ad Feature in Sizmek MDX
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Open the index.html file in your HTML5 Workspace Folder
Locate the options object with the config object and update variables as needed
Save index.html
Zip and upload ‘HTML5 Workspace Folder’
From the main menu, select Shortcuts > Create New Ad > Create a New Ad
In the Ad Name field, enter the unique name of your ad
From the Ad Format drop-down list, select HTML5 Polite Banner
Choose the HTML5 Workspace Folder you uploaded to platform
Choose Default Image
Save
Copyright © 2015 Sizmek. All rights reserved.
10
5