PRODUCT
Follow

 Overview

DEPRECATION NOTICE:

Given recent changes to the mobile landscape and what is and isn’t allowed by mobile operating systems, we no longer recommend using this feature in most scenarios and instead advise using the autoplay settings of regular video, as explained in our Video Tracking feature.

Introduction and Screenshots

The Mobile Auto Play Ad Feature allows you to bypass mobile device restrictions and automatically play your video by replacing it with a sprite image sequence. Using an image sequence, we can simulate the inline video experience seen on desktop environments.

The Mobile Auto Play Ad Feature uses the files created by the Sizmek Mobile Auto Play Generator tool. This tool converts video files into sprite images, each made up of a 10 x 3 series of image frames. These sprite images, when used by the Mobile Auto Play Sprite Player, will mimic the original video. You can find the Mobile Auto Play Generator at the following address:

https://szmk.io/tools/spritesheetGenerator/

Please Note: As a practice, when using the Mobile Auto Play Generator to create your sprite sheets, we recommend keeping the total length under 15 seconds to avoid large files. Please take into consideration that the larger the player dimensions, the higher the frame rate or the number of images chosen, the larger the total file size will be added to your overall ad file size. This additional file size could impact your campaign depending on where the ad is run.  

Below: On the left, we have a 300x250 Polite Banner displaying the Mobile Auto Play Sprite Player and on the right the sprite player on hover with pause and unmute button.

auto1.jpg     auto2.jpg

Demos/Downloads

The following table provides links to the template and demo for the Mobile Autoplay ad feature.

Template

Sizmek_HTML5_Video_Auto_Play.zip

Demo

Preview demo

Supported Platforms - Ad Playback

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 Mobile Auto Play Ad Feature includes one HTML5 Workspace template using the Polite Banner. format. 

Included Workspace Files

Polite Format

File Name 

Description

config.js

Sizmek Ad Manifest file

images/btn_play.png

Sprite player play button

images/DefaultImage300x250.gif

Demo Default Backup image

images/mute.png

Sprite player mute button

images/play.png

Sprite player play button

images/poster.jpg

Sprite player poster image

images/sprite1.jpg

Sprite player sprite sheet 

images/sprite2.jpg

Sprite player sprite sheet

index.html

Demo HTML index file

scripts/videoAutoPlay.js

Ad Feature Javascript file

styles/style.css

Demo Stylesheet

video/example.mp4

Demo video file


Implementing the Ad Feature

Getting Started

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

  • Mobile Auto Play Ad Feature files from Showcase
  • Sprite Images from Mobile Auto Play Generator

Add the Mobile Auto Play Ad Feature to Your Workspace Code

The following steps illustrate how to add the Mobile Auto Play Ad Feature to your creative Workspace. Please note that additional steps may be necessary depending on the Format being used. 

Procedure
  1. Include the Mobile Auto Play Stylesheets in the head of your Workspace index.html file:
  <link type="text/css" rel="stylesheet" href="styles/style.css"/>  
  1. Include the Mobile Auto Play Javascript files in the head of your Workspace index.html file:
    <script type="text/javascript" src="scripts/videoAutoPlay.js"></script>
  1. Include the EB Video Module in the head of your Workspace index.html file. Make sure to place this before loading Adkit:
    <script>  EBModulesToLoad = ['Video']; </script>
  1. Add the following Javascript detailing your Mobile Auto Play config object. Update parameters as needed (see Mobile Auto Play Parameters before for descriptions). 
    <script>
        var config = {
            spriteDiv: 'sprite_container',
	    spriteNum: 2,
	    frameWidth: 260,
            frameHeight: 146,
	    fps: 8,
length: 34,
vidFile: ['video/example.mp4', 'video/mp4' ], }; </script>
  1. Instantiate and pass the config object to the Mobile Auto Play script.
    <script>
        var mobileAutoPlay = new MobileAutoPlay(config);
    </script>


Mobile Auto Play Parameters

Parameter

Type

Description

spriteDiv

String

The ID of the div you want to load to your Mobile Sprite Player.

spriteNum

Number

The total number of sprite sheets to be played

frameWidth

Number

The desired width of the Sprite Player

frameHeight

Number

The desired height of the Sprite Player

fps

Number

The frame rate at which you wish to play your sprites sheets. The rate is chosen with the Mobile Auto Play Generator tool.

length

Number

The total number of sprite frames to be played

loop

Boolean

true or false: If set to true, the player will loop to the beginning once it reaches the last frame.

filePath

String

The file path to the sprite sheets. If left blank, the script will look for the sprite sheets in the images directory.

vidDiv

String The ID of the div you want to load to your Video Player.

vidFile

Object An object including the file name and file type of the video you wish to load into your video tag

vidControls

Boolean

true or false: If set to true, video controls will be shown.

vidAuto

Boolean

true or false: If set to true, players will auto play

deviceTracking

Boolean

true or false: If set to true, desktop browsers will bypass the sprite player and just play the video file

viewabilityThreshold

Number

0 - 100: Percentage at which Players will pause or play

 

Available Methods

When building the HTML for your custom template, use the following methods to control your Mobile Auto Play

Method Name

Parameters

Description

play none

Play the sprite player

pause

none

Pause the sprite player

playVideo  none

Play the video player

pauseVideo  none

Pause the video player

resize width, height

resize both players by sending width and height

reinitPlayer  none

resets the sprite player and starts playing sprites

resetPlayer none

resets the sprite player

 

 

 

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

Sizmek MDX2.0 Platform Setup

Archive the Mobile Auto Play 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.  

Using Mobile Auto Play Generator

The Mobile Auto Play Generator is a client-side tool used to create a series of images, or frames, on sprite sheets. These frames are ordered in three rows of ten. When played in order, the frames on these sprite sheets mimic video, without audio. Follow the steps below to upload and convert your video to sprite sheets and download the necessary assets needed to play these sprite sheets on devices that prohibit the auto play of video.  

  1. Upload your video by clicking the ‘Click or Drag to Upload Video File’ button on the left, or by dragging your video onto the page.                                                                                  gen_1.jpg  
  2. Choose your Poster image by using the video scrubber. A preview of your Poster image will appear to the right. Once you’ve chosen your image click the ‘Add Poster & Continue’ At any time during the conversion process, you may click on the ‘Convert New Video’ button in the upper right-hand corner to restart the process.gen_2.jpg 
  3. A summary of alerts and video specs will be listed in the left panel. If you’d like to change your Poster Image, click on the ‘Change Poster Image’ From the right panel, choose your image sequence duration and loop preference. For further settings, click the ‘Show Advanced Options’ to expand the Advanced Options panel. A full list of options are included below.
    • Autoplay Duration – choose the length in seconds of the image sequence to create. Image sequences start from the beginning of the video and stop at the length you selected.
    • Loop Autoplay Playertrue or false. True will result in looping autoplay.
    • Generate Images By – FPS or # of Sprites. Choose how you wish to generate the Sprite images. By default we create 8 frames per second. But you may wish to choose a different frame rate or the number of images per Sprite instead. Please note: the higher the frame rate or image number, the larger the total file size.
    • Player Size – Choose the dimensions of the sprite player. By choosing "Same as Source" the player will match the source video height and width. By choosing custom, you can enter the height and width of player. Please note: the larger the player dimensions, the larger the total file size.
    • Image Compression - Choose the image quality of the images used in your sprite player. This will determine the compression rate. The default is currently set to 60% of the original image quality. Please note: the higher the percentage, the larger the total file size.
    • Device Optimization - Choose whether or not you want the player to play the original video on Desktop. The default is true.
  4. Once you’ve updated the settings to your liking, click the ‘Convert Video’ button when you’re ready.gen_3.jpg 
  5. Once the video has finished converting you can then preview the Autoplay video in the right panel. If the player was not set to loop, you can click the ‘Reset Player’ button above the preview to restart the video player. To download your new HTML5 Autoplay files, click one of the download buttons below the preview. Click ‘Sprites Images Only’ to download a directory with just the images needed, or click ‘Full Player Template’ to download the entire HTML5 Autoplay Ad Feature. This will include all Stylesheet and Javascript necessary to play the sprite image sequence.

last.jpg

 

Known Issues

  1. The Mobile Auto Play Generator is not supported by Chrome due to Chrome issue 66631 in which Chrome does not support accurate seeking in an MP4/h264 using b-frames. Using Chrome to convert your video may result in missed or duplicate frames in the final sprite sequence.
  2. The Mobile Auto Play Generator requires Canvas which is not supported in supported in IE8.
  3. The Mobile Auto Play Generator Preview appears to jitter or blink in Safari. Please note, the final files are not affected.
  4. Depending on your processor speed, Sprite image results may vary slightly with each conversion.
  5. Downloading files from Safari will result in a file named “Unknown”. User must rename file to include ‘.zip’ extension to extract files.

Supported Platforms - Generator

Platform

Supported Version

Windows

Internet Explorer 11+, Edge, Firefox

Mac

Firefox, Safari

iPhone

iOS 9.0 and later

 

 

Change Log 

February 26, 2018

  • Updated to Ad Feature template 2.0.4
  • removed support for Scroll Detect Custom Script - switched to use API for viewability
  • branding changes

 

February 29th, 2016

  • Updated to add Ad Feature noun tracking

 

October 14th, 2015

  • Initial Release

 

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

Comments