PRODUCT
Follow

Quick Start Guide

Note: This section deals with setting up and manually tracking a single video within an html5 video player. For the full snippet to copy/paste please skip to the advanced section.

 

Summary

This Video Player code snippet provides the means to manually fire Sizmek Video Tracking events within an ad using standard HTML5 video objects for display ads (NOT in-stream). Typical usage of the Sizmek Video Module allows for automatic tracking of the complete set of video events. In this guide, we provide developers with the ability to manually fire these events as needed if standard tracking is not desired. This guide will document common usage as well as a full list of trackable video events

Please note, manually firing events will affect the results when pulling reports on video assets and only the events that are manually fired will show up in your analytics. 

Click for live demo

video.jpg

How to Build

  1. Add the EB Video Module include in the head of your Workspace index.html file. Be sure to add this before adding the adkit include. 
    <script type="text/javascript">EBModulesToLoad = ['Video'];</script>
  2. Add a video tag with video source to the body of your index.html file. Add any attributes you may need such as controls or autoplay. A list of commonly used attributes is included below. 
    <video id="video" controls autoplay>
    	<source src="videos\sizmek.mp4" type="video/mp4" />
    	Your browser does not support the video tag.
    </video>
  3. Once adkit has loaded, instantiate the EB Video Module.
    <script type="text/javascript">
        // Establish reference to video tag
        var theVideo = document.getElementById("video")
        // Create video module instance to track video events
        var trackedVideo = new EBG.VideoModule();
    </script>  
  4. Use native HTML5 event listeners to listen to the video object's events. On the event handler, manually fire Sizmek Video Events and pass the video src reference to track your video asset. 
    <script type="text/javascript">
        // Add listener for play event
        theVideo.addEventListener("play", handleOnPlay, false);
    
        function handleOnPlay(e) {
            // Fire Play Event
            EB.videoInteraction(EBG.VideoInteraction.PLAY, theVideo.src, true);
        }
    </script>  

Advanced 

Full Code Snippet

Please see the full script, below, needed to implement the video player into your ad. 

Note: the code snippet below does not include styling which can affect the display and layout of the page. In the absence of styling, the video will load at the width and height of the video source possibly leading to undesirable results.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sizmek Video Player Ad Feature</title>
<script type="text/javascript">EBModulesToLoad = ['Video'];</script> <script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingScript/adKit/adkit.js"></script> </head> <body> <!-- Begin Sizmek Video Player Ad Feature --> <video id="video" controls> <source src="videos\sizmek.mp4" type="video/mp4" /> Your browser does not support the video tag. </video> <script type="text/javascript"> adkit.onReady( function() { // Establish reference to video tag var theVideo = document.getElementById('video'); // Establish string for video asset localpath var localPath = ''; // Establish boolean to track fullscreen var isFS = false; // Establish boolean to track play status var isPlaying = false; // Establish Boolean to track user initiated actions var isUserInitiated = false; // Add listeners for video events theVideo.addEventListener("play", handleOnPlay, false); theVideo.addEventListener("pause", handleOnPause, false); theVideo.addEventListener("timeupdate", handleTimeUpdate, false); theVideo.addEventListener("volumechange", handleVolumeChange, false); theVideo.addEventListener("seeked", handleSeek, false); theVideo.addEventListener('webkitfullscreenchange', handleFSChange, false); theVideo.addEventListener('mozfullscreenchange', handleFSChange, false); theVideo.addEventListener('fullscreenchange', handleFSChange, false); // Create video module instance to track video events var trackedVideo = new EBG.VideoModule(); // Get Local Path of video source getLocalPath('sizmek.mp4'); // Play Video theVideo.play(); function handleOnPlay(e) { // Start Timer if (!isPlaying){ EB.startVideoTimer(localPath, isFS); } // Update Boolean isPlaying = true; // Check to see if user was seeking video if (trackedVideo._seekTimeout === true && trackedVideo._reset == false) { // Reset Seek Boolean trackedVideo._seekTimeout = false; // Update Reset Boolean - accounts for replay slider drag trackedVideo._reset = true; // Fire slidder dragged event trackVideoEvent(EBG.VideoInteraction.SLIDER_DRAGGED, localPath, true); } // Check if video is being replayed if (trackedVideo._ended === true) { // Reset Booleans trackedVideo._started = false; trackedVideo._25played = false; trackedVideo._50played = false; trackedVideo._75played = false; trackedVideo._ended = false; // Update reset boolean to prevent seek on replay trackedVideo._reset = true; // Fire Replay Event trackVideoEvent(EBG.VideoInteraction.REPLAY, localPath, isUserInitiated); } else { // Update Reset Boolean so we can seek again trackedVideo._reset = false; // Reset seek boolean on play trackedVideo._seekTimeout = false; // Fire Play Event trackVideoEvent(EBG.VideoInteraction.PLAY, localPath, isUserInitiated); } } function handleOnPause(e) { // Update Boolean isPlaying = false; // Pause Timer EB.stopVideoTimer(); // Check if in fullscreen mode if (isFS){ // Fire Fullscreen Paused trackVideoEvent(EBG.VideoInteraction.FULLSCREEN_PAUSE, localPath, isUserInitiated); } else { // Fire Pause Event trackVideoEvent(EBG.VideoInteraction.PAUSE, localPath, isUserInitiated); } } function handleTimeUpdate(e) { // Check for first play if (trackedVideo._started === false) { // Update First play boolean trackedVideo._started = true; // Check if Video is muted if (theVideo.muted === false) { // Fire unmuted event trackVideoEvent(EBG.VideoInteraction.UNMUTED, localPath); } // Fire Started Event trackVideoEvent(EBG.VideoInteraction.STARTED, localPath, isUserInitiated); } // Fire Pause event if (theVideo.currentTime >= (theVideo.duration * .25) && trackedVideo._25played === false) { // Fire 1st Quartile Event trackVideoEvent(EBG.VideoInteraction.PERCENT_25_PLAYED, localPath, false); // Update Quartile Boolean trackedVideo._25played = true; } else if (theVideo.currentTime >= (theVideo.duration * .5) && trackedVideo._50played === false) { // Fire 1st Quartile Event trackVideoEvent(EBG.VideoInteraction.PERCENT_50_PLAYED, localPath, false); // Update Quartile Boolean trackedVideo._50played = true; } else if (theVideo.currentTime >= (theVideo.duration * .75) && trackedVideo._75played === false) { // Fire 3rd Quartile Event trackVideoEvent(EBG.VideoInteraction.PERCENT_75_PLAYED, localPath, false); // Update Quartile Boolean trackedVideo._75played = true; } else if (theVideo.currentTime == theVideo.duration && trackedVideo._ended === false) { // Fire Video Completed Event trackVideoEvent(EBG.VideoInteraction.FULLPLAY, localPath, false); // Update Video Complete Boolean trackedVideo._ended = true; } } function handleVolumeChange(e) { // Check if Video is muted if (theVideo.muted === true) { // Update Boolean trackedVideo._mute = true; // check for fullscreen if (isFS){ // Fire muted event trackVideoEvent(EBG.VideoInteraction.FULLSCREEN_MUTE, localPath, true); } else { // Fire muted event trackVideoEvent(EBG.VideoInteraction.MUTE, localPath, true); } } else if (trackedVideo._mute){ // Update Boolean trackedVideo._mute = false; // Fire unmute event trackVideoEvent(EBG.VideoInteraction.UNMUTE, localPath, true); } } function handleSeek(e) { // Update Seeking Boolean trackedVideo._seekTimeout = true; } function handleFSChange() { // Toggle boolean isFS = !isFS; // Track fullscreen status if(isFS) { trackVideoEvent(EBG.VideoInteraction.FULLSCREEN_START, localPath, true); } else { trackVideoEvent(EBG.VideoInteraction.FULLSCREEN_END, localPath, true); } } function getLocalPath(_src) { // Get video source and split off path var str = theVideo.currentSrc.split("/"); // Determine Asset Name assetName = str[str.length - 1]; // verify working from live tag if (EB._adConfig !== null){ // loop through assets for (var i in EB._adConfig.assets) { // check for match with current video id if (EB._adConfig.assets[i].dsPath.indexOf(_src) != -1) { // get asset path localPath = EB._adConfig.assets[i].dsPath; break; } } } } function trackVideoEvent(_interactionName, _videoSource, _userInteraction) { // call video interaction EB.videoInteraction(_interactionName, _videoSource, _userInteraction); // Update Boolean for user isUserInitiated = false; } </script> <!-- End Sizmek Video Player Ad Feature --> </body> </html>

 

Video Tag Optional Attributes 

For a full list of Native HTML5 Video Player methods, go to www.w3schools.com

Attribute

Value

Description

autoplay

autoplay

Specifies that the video will start playing as soon as it is ready

controls

controls

Specifies that video controls should be displayed (such as a play/pause button etc).

muted

muted

Specifies that the audio output of the video should be muted

loop

loop

Specifies that the video will start over again, every time it is finished

playsinline

playsinline

Prevents iOS devices from automatically enter fullscreen mode when playback begins. Supported in iOS 10+. Use webkit-playsinline for iOS 4-9. 

poster

 URL

Specifies an image to be shown while the video is downloading, or until the user hits the play button

preload

auto
metadata
none

 Specifies if and how the author thinks the video should be loaded when the page loads

 

Video Module Player Method

Function

Parameters

Description

playVideo

User (optional): Boolean true or false

Play Video. Optional to send true or false to track whether Play was user initiated

ex:

// tracks user initiated play

trackedVideo.playVideo(true);

// tracks auto play

trackedVideo.playVideo(false);

Please note: if you intend to report that the play is user-initiated, you must also fire the "USER_INITIATED_VIDEO" event

setVideoSrc

asset (file name or url)

or

asset id number 

Update the video asset that is tracked by the video module. 

// update video player source

theVideo.src = "videos/sizmek.mp4";

// use API to update video source in video module
trackedVideo.setVideoSrc(theVideo.src);

StartVideoTimer

video asset and

is fullscreen boolean

 

Track when the video is playing to track video play duration.

Ex:

EB.StartVideoTimer(theVideo.src, isFullScreen);

StopVideoTimer

 

Track when the video is not playing to track video play duration.

Ex:

EB.StopVideoTimer();

 

For a full list of the Video Module Events, see the following help doc.

Adkit Video Module Events

 

Native Video Player Methods

For a full list of Native HTML5 Video Player methods, go to www.w3schools.com

Name

Description

load

Re-loads the audio/video element

ex:

// Change the video source and re-load the video:

theVideo.src = "movie.mp4";
myVideo.load();

pause

 

Pauses the currently playing video

ex: theVideo.pause();

 

Native Video Player Properties

For a full list of Native HTML5 Video Player properties, go to www.w3schools.com

Name

Description

muted

Sets or returns whether the audio/video is muted or not

ex:

// Mutes the video

theVideo.muted = true;

 // UnMutes the video

theVideo.muted = false; 

volume

Sets or returns the volume of the video

ex:
// sets the video element 'theVideo' to 60% volume
theVideo.volume = .6;

currentTime

Sets or returns the current position (in seconds) of the video playback.

When setting this property, the playback will jump to the specified position.

ex:

// Updates the time position to 3 seconds

theVideo.currentTime = 3; 

 

Native Video Player Events

For a full list of Native HTML5 Video Player events, go to www.w3schools.com

Event Name

Description and Usage

play

Fired when the video has been started or is no longer paused.

theVideo.onplay=function(){myScript};

theVideo.addEventListener("play", myScript);

pause

Fired when the video is paused either by the user or programmatically.

theVideo.onpause=function(){myScript};

theVideo.addEventListener("pause", myScript);

ended

Fired when the video has reached the end.

theVideo.onended=function(){myScript};

theVideo.addEventListener("ended", myScript);

error

Fired when an error occurred during the loading of a video.

theVideo.onerror=function(){myScript};

theVideo.addEventListener("error", myScript);

seeked

Fired when the user is finished moving/skipping to a new position in the video

theVideo.onseeked=function(){myScript};

theVideo.addEventListener("seeked", myScript);

timeUpdate

Fired when the playing position of a video has changed.

theVideo.ontimeupdate=function(){myScript};

theVideo.addEventListener("timeupdate", myScript);

volumeChange

Fired each time the volume of a video has been changed.

theVideo.onvolumechange=function(){myScript};

theVideo.addEventListener("volumechange", myScript);

Support Matrix

Supported Platforms     Supported Properties  
Windows Internet Explorer 10+, Microsoft Edge, Firefox, Chrome   Polite Loading Yes
Mac Safari, Firefox, Chrome   Safeframe Support Yes
iPhone iOS 9.0 and later   MRAID (in App Support) Yes
iPad iOS 9.0 and later   Adkit Ready Yes
Android Phone Android 6 and later   Secure Serving Yes
Android Tablet Android 6 and later   SAS Supported Yes

Ad Setup

When you are finished authoring your ad, put all of its files in one folder and compress that folder to a ZIP. When uploaded to the platform, the ZIP's files will automatically be extracted, creating a Workspace on the platform.

 

When you are finished authoring your ad, put all of its files in one folder and compress that folder to a ZIP. When uploaded to the platform, the ZIP's files will automatically be extracted, creating a Workspace on the platform.

 

Requirements Checklist

  1. Requires Adkit, will not work with EBLoader only - learn more about Adkit
  2. Requires the EB Video Module include before the Adkit include
  3. Supported in Rich Media Formats only. No Standard Banners

 

Known Issues

  • Due to the limited event data associated with native controls for HTML5 video, it is difficult to determine the origin of certain events as they pertain to video tracking. For instance, while we can track whether a custom play button built in javascript was clicked by the user, there is no reliable way to determine if the user clicked on the native play button, making it difficult to ascertain if the event was user-initiated. Likewise, it is difficult to determine if the "seeked" event is being fired because the user dragged the playhead, or if the user clicked the replay button. Similarly, if the video tag includes the "loop" attribute, the "seeked" event is fired automatically as the playhead updates. Please keep this in mind when using manual tracking.
  • When user the playVideo method with the EB.videoModule, please note, that the "IsUserInitiated" integer for the "ebVideoStarted" interaction will report as a 0. For manual tracking, the USER_INITIATED_VIDEO event must be fired for metrics to properly record user-initiated video. Additionally, once the user-initiated value is set to true, it will always be true for that impression. 

 

Change Log

July 13, 2018
 
  • Initial Release

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

Comments