Quick Start Guide
Note: This section deals with setting up and tracking multiple videos within a single 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 enable Sizmek Video Tracking within an ad using standard HTML5 video objects for display ads (NOT in-stream). This guide will document both “auto tracking” as well as manual tracking of video interactions for multiple video assets within a single video player.
How to Build
- 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>
- 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>
- Once adkit has loaded, instantiate the EB Video Module and pass the video element reference to the 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(theVideo); </script>
- Use the setVideoSrc API method to update the video module so that it tracks a new video asset
<script type="text/javascript"> // update video player source theVideo.src = "videos/sizmek2.mp4"; // use API to update video source in video module trackedVideo.setVideoSrc(theVideo.src); </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>
<button id="video1">Video 1</button>
<button id="video2">Video 2</button>
<script type="text/javascript">
adkit.onReady( function() {
// Establish reference to video tag
var theVideo = document.getElementById('video');
// Create video module instance to track video events
var trackedVideo = new EBG.VideoModule(theVideo);
// Play the video and track the play action as user-initiated.
// Pass true for user-initiated and false for auto
trackedVideo.playVideo(true);
// Save references to buttons
var button1 = document.getElementById("video1");
var button2 = document.getElementById("video2");
button1.addEventListener("click", function(){
// Update video player source
theVideo.src = "videos/sizmek.mp4";
// Use API to update video source in video module
trackedVideo.setVideoSrc(theVideo.src);
});
button2.addEventListener("click", function(){
// Update video player source
theVideo.src = "videos/sizmek2.mp4";
// Use API to update video source in video module
trackedVideo.setVideoSrc(theVideo.src);
});
});
</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 |
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);
|
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 |
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"; |
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: |
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
Requirements Checklist
- Requires Adkit, will not work with EBLoader only - learn more about Adkit
- Requires the EB Video Module include before the Adkit include
- 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
- Initial Release
Comments