Meme Generator HTML5 Build Guide

Sizmek Ad Feature
Meme Generator
HTML5 Build Guide
Table of Contents
Overview ................................................................................................................................................................ 2
Supported Platforms ....................................................................................................................................................... 4
Demos/Downloads .......................................................................................................................................................... 4
Known Issues .................................................................................................................................................................... 4
Note .................................................................................................................................................................................... 5
Included Files ........................................................................................................................................................ 6
Implementing the Ad Feature ............................................................................................................................ 7
Configuring the HTML5 Meme Generator Ad Feature ................................................................................................ 7
Setting Up the Feature in Sizmek MDX ....................................................................................................................... 12
........................................................................................................................................................................................... 13
Sizmek
Overview
The Sizmek HTML5 Meme Generator Ad Feature allows you to create an animated GIF from an in-ad video.
There are many ways to personalize your GIF, including overlay text, optional filters, and playback speed.
Additional options include GIF preview, GIF looping, maximum GIF length, text color, text size, social
sharing, and more.
The template works as follows: User watches a video within the ad and clicks on the “GIF IT” button. They
are instructed to choose the start and end points for their GIF and apply overlay text and filters. Then, the
user chooses their GIF playback speed and clicks “BUILD GIF”. Once the GIF is finished rendering, the user
can download it, share it, or create another GIF.
This Ad Feature includes three (3) templates:
1. Safeframes Template – Works within Yahoo Safeframes, does not use Web Workers
2. Standard Template – Does not work within Yahoo Safeframes, does not use Web Workers
3. Standard WebWorker Template – Does not work within Yahoo Safeframes, uses Web Workers
Copyright © 2015 Sizmek. All rights reserved.
2
Sizmek
Copyright © 2015 Sizmek. All rights reserved.
3
Sizmek
Supported Platforms
Platform
Supported Version
Windows
Internet Explorer 10+, Firefox, Chrome, Safari
Mac
Firefox, Chrome, Safari
Supported Version
Platform
iPad
iOS 8.0 and later
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
•
•
•
•
Canvas is not supported in IE8
Web Workers are not supported in IE9
Feature will not work locally, Web Workers must be hosted
On slower machines, video scrubbing lag may cause filter thumbnails to fail live update
Copyright © 2015 Sizmek. All rights reserved.
4
Sizmek
•
•
GIF Preview may not work on slower machines
Chrome issue 66631 – Chrome does not support accurate seeking in an MP4/h264 using b-frames
o WhenusingtheMP4formatinChrome>43,thecurrentTimemethodusedtoseektoanew
framedoesnotresultinconsistentorexpectedbehaviorresultinginmisplacedframesinthefinal
animatedGIF.
o Itisrecommendedthatthewebmformatbeusedasaprimaryvideosourcetoavoidthisbug.
MP4canbeusedasasecondaryvideosourceforotherbrowsers.
Note
The Social Share Ad Feature is an optional add-on to this Ad Feature. However, due to the animated GIF being
created dynamically in the browser, the image must first be uploaded to a server. In order to include this
service, you must submit a Custom Dev request for an Image Upload account. This service has an associated
fee of $150 per month.
Copyright © 2015 Sizmek. All rights reserved.
5
Sizmek
Included Files
Filename
Description
css/feature_styles.css
Sizmek Feature Stylesheet
images/DefaultImage970x250.gif
Sizmek Feature default image and demo background
images/ facebook25.png
Facebook icon for Social Panel
images/ googleplus25.png
Google Plus icon for Social Panel
images/ loader.gif
Loading animated GIF
images/ pinterest25.png
Pinterest icon for Social Panel
images/ poster.gif
Video Poster
images/ tumblr25.png
Tumblr icon for Social Panel
index.html
Sizmek Feature HTML file.
js/animatedGif.js
Sizmek Feature Javascript file that
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
js/gifEncoder/b64.js
Javascript file that handles image format
js/gifEncoder/GIFEncoder.js
Javascript file that handles animated GIF stream
js/gifEncoder/LZWEncoder.js
Javascript file that handles image compression
js/gifEncoder/NeuQuant.js
Javascript file that handles Neural-Net quantization
js/gifEncoder/w.js
Javascript file that handles gif encoding messages from
main script
video/sizmek.mp4
Sizmek Feature video asset
Copyright © 2015 Sizmek. All rights reserved.
6
Sizmek
Implementing the Ad Feature
Before you begin, make sure you have the following resources available:
•
•
•
Meme Generator Ad Feature files
Video
Custom Dev Image Upload Account (required if using Social Share feature)
Configuring the HTML5 Meme Generator Ad Feature
The HTML5 Meme Generator Ad Feature lets the developer add functionality to their video, which allows users
to convert sections of the video into animated GIFs. To implement the Meme Generator Feature, add the
following code to your creative. Please note, this is example code only and uses abbreviated script links for the
EBLoader file. Additionally, this example code only includes the required parameters and excludes all optional
parameters. All parameters are listed below the code.
<script
<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=”EBLoader.js"></script>
type="text/javascript" src="js/animatedGif.js"></script>
<link type="text/css" rel="stylesheet" href="css/feature_styles.css"/>
<div id="video"></div>
<div id="btn_gifit">GIF IT!</div>
<div id="gif_maker"></div>
<script type="text/javascript">
var videos = [[ 'video/sizmek.mp4', 'video/mp4' ]];
var config = { options: {
script: 'animatedGif',
vidDiv: 'video',
vid: videos
}};
var animatedGif = new animatedGif(config);
</script>
Copyright © 2015 Sizmek. All rights reserved.
7
Sizmek
Config object options:
Property Name
videos
Description
Array - Array that holds arrays of videos. Each
array should include file path and file type.
Required.
Place a new video array for each src type desired.
For each array, a new src tag will be included in
the video element. The browser will try to play
the first source and move down the list until one
plays.
Example:
[[ 'video/sizmek.webm, 'video/webm ], [
'video/sizmek.mp4', 'video/mp4' ] ];
In the example above the developer has listed
two videos, both in the video folder, both named
“sizmek”, but the first uses the Webm format and
the second uses the MP4 format. Since Chrome
can play the Webm format it plays the first video
file. On the other hand, Webm does not play in IE
or Safari, therefore Safari and IE will skip the
Webm format and play the MP4.
filters
Array - Array that holds the names of your filters
so you can easily rename them.
script
String - Property that establishes the scope of
the script. Enter the var name of the new
instantiated script. In the example above, “var
animatedGif = new animatedGif(config);” script =
‘animatedGif’; Required.
vidDiv
String - Enter the name of div you want the script
to place the video. Required.
Copyright © 2015 Sizmek. All rights reserved.
8
Sizmek
vid
Array - Enter var name of video array. Default is
‘videos’. Required.
auto
Boolean - Enter true or false for auto play video.
poster
String - Enter location of video Poster image.
muteVideo
Boolean - Enter true or false if you want the video
to mute in GIF Maker mode.
filterNames
Array - Enter var name of filter name array.
Default is ‘filters’.
gifWidth
Number - Enter width of video. This will also be
the width of animated GIF.
gifHeight
Number - Enter Height of video. This will also be
the height of the animated GIF.
gifQuality
Number - Enter a number between 10 and 20, 10
being the best and 20 being the worst.
gifLoop
Number - Enter the number of times you want
the GIF to Loop. Enter 0 for infinite.
gifMax
Number - Enter the maximum number of seconds
the GIF can be.
gifPreview
Boolean - Enter true or false if you want to show
a GIF preview when you hit the play button in GIF
Maker mode.
gifTextColor
String - Enter a hex color for the overlay text.
gifTextSize
Number - Enter a font size for the overlay text.
gifMakerDiv
String - Enter the name of the div you want to
place the Gif Maker feature into. Default is
‘gif_maker’.
gifName
String - Enter a name for the file upon download.
showInstructions
Boolean – Enter true or false if you want to
include a div with id “instructions” for the purpose
Copyright © 2015 Sizmek. All rights reserved.
9
Sizmek
of listing instructions.
showTimeData
Boolean – Enter true or false if you want to show
the start time, stop time and length of GIF.
showFacebook
Boolean – Enter true or false if you want to
include Facebook in the Social Share feature.
showGoogle
Boolean – Enter true or false if you want to
include Google Plus in the Social Share feature.
showPinterest
Boolean – Enter true or false if you want to
include Pinterest in the Social Share feature.
showTumblr
Boolean – Enter true or false if you want to
include Tumblr in the Social Share feature.
Method names are listed below:
Method Name
Description
addSocial
Determines if Social Share is needed and
placement Social Share Container on page.
addTrimmer
Adds the trimming feature to the video in GIF
Maker mode.
applyFilter
Applies filters to image data.
buildEffectButtons
Places Filter buttons on page and applies event
listeners.
chooseSpeed
Handle Event Listeners for .5x, 1x and 2x buttons
chooseTextType
Handles Event Listeners for the Single or Double
Line Buttons.
createGif
Updates display and prepares to create GIF.
defineFilter
Lists all filters rgba sequence. New filters can be
added here.
Copyright © 2015 Sizmek. All rights reserved.
10
Sizmek
doThumbs
Handles live filter thumbnail previews.
drawFrame
Loops through and captures frames from video to
canvas, applies filter, copies updated image to 2nd
canvas, writes overlay text to 2nd canvas and adds
frame to GIF encoder.
handleEffects
Handles the Filter Button Event listener.
handleGifClose
Closes GIF Maker Mode.
handleGifit
Opens GIF Maker Mode.
handlePause
Pauses Video in GIF Maker Mode.
handlePlay
Handle Video Play in GIF Maker Mode and
determines whether to show gif preview or play
video.
handleSocial
Handles Event Listeners for Social Share Buttons.
handleSpeed
Handles the GIF Speed Button Event Listener.
handleText
Handles Text Overlay Button Event Listener.
handleTextMove
Uses jQuery to handle the draggable text field.
handleVideoProgress
Listens to video progress while in GIF Maker
mode and handles updating playhead and looping.
hideSocial
Hides the Social Share Panel.
loadEffects
Handle individual filter buttons event listeners.
onComplete
Triggered when GIF encoder is complete. Handles
GIF display, stopping encoder, showing share,
download and new GIF buttons. Also handles
thumbnail complete.
resetGif
Handles resetting all vars and display before
creating a new gif or closing GIF Maker mode.
setUpEncoder
Handles creating and places the canvas on page,
updates text size and starts GIF encoder.
Copyright © 2015 Sizmek. All rights reserved.
11
Sizmek
setUpGifMaker
Handles the majority of the HTML construction,
places elements on page, applies event listeners,
and fires off several other important methods.
setUpVideo
Handles the placement of the EBG Video Module
on the page links up video asset.
showSocial
Handle the construction and placement of the
Social Share Panel, handles upload image service
and event listeners for social share buttons.
updateTrimmer3
Updates Trimmer when entering GIF Maker
Mode.
Setting Up the 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.
12
Notice
The information contained in this document is proprietary and confidential to Sizmek and/or any of
its affiliated companies. Disclosure, copying, reproduction, storing or any use of this document or
any part thereof without the express prior, written consent of Sizmek or its authorized
representatives is strictly prohibited. The information furnished in this document is believed to be
accurate and reliable. However no responsibility is assumed by Sizmek for the use of this
information. Sizmek reserves the right to make changes to the information included in this
document at any time and without notice.
Copyright © 2014 Sizmek. All rights reserved.
Flash is either a registered trademark or trademark of Adobe Systems Incorporated in the United States and/or other countries.
Trademark Note: Sizmek, the Sizmek logo, Sizmek Rich Media, Sizmek Mobile, Sizmek Video, Sizmek Channel Connect, Sizmek Workshop, etc. are trademarks and/or registered trademarks of Sizmek. All other
trademarks are the property of their respective owners.