Follow

The HTML5 video module automatically tracks your video interactions.

Before you can use the HTML5 video module, you must perform the following steps:

If you want to use EBV.js, which handles all video interactions, then you have to add the following line of code to the beginning of your HTML asset as follows:

 Example

EBModulesToLoad = ['Video']; 

This must be added before EBLoader.js is loaded. For more information, see Initializing the API.

After the EBLoader scans the creative and finds the EBModulesToLoad array with 'Video', it will then know to load the EBV script.

After you have created a <video> element on the page, you then need to create an instance of Sizmek's video object. The video object will report all video interactions for the creative.

For more information on the video element, see http://www.w3schools.com/html5/html5_video.asp.

Note: You must define different instances for each <video> element on the page.

 Example

var Video1 = new EBG.VideoModule(videoElem1);

var Video2 = new EBG.VideoModule(videoElem2); 

Note: videoElem1/videoElem2 are the <video> elements in the ad.

Then, you can use the following functions as necessary:

function setFullScreenState(bool)

Reports that the video went to full screen for correct interaction tracking on browsers that do not support full screen events, such as Firefox and IE9.

If you are running the ad on browsers that do not support full screen events, call setFullScreenState(true) whenever the video enters full-screen mode, and call setFullScreenState(false) whenever the video leaves full-screen mode.

If you do not call this function on unsupported browsers when you detect that the video has entered full screen, then all of your interactions will not be reported as full-screen mode interactions. For example, if you had a "pause" interaction while the video was in full screen mode on one of these unsupported browsers and you did not call setFullScreenState(true), the interaction which will be reported is “ebVideoPause” rather than “ebVideoFSPause".

Additionally, you can pass the isFSmode boolean variable as the argument to this function. isFSmode is true if the video is in full screen mode, and false when not.

Note: <MM> does not offer a method to set the full-screen mode of the video. This functionality is built into video players already and is not part of <MM>'s API.

Parameters

Type

Description

Boolean

true: Sets the video state to full-screen mode.

false: Sets the video state to windowed mode.

 

 Example

Video1.setFullScreenState(isFSmode);

function playVideo(isUserInitiated)

Plays the video in a video module (not the HTML <video> tag) and tracks the action as either user-initiated and auto-initiated.

This function should be called by the creative inside its play handlers. If you have a play button in your ad, you should use this function to start playing the video asset instead of using HTML5VideoElement.play(). The playVideo() function enables you to distinguish between user -initiated and auto-initiated videos and allows ebVideoUserInitiated to be tracked.

Parameter

Name

Type

Description

isUserInitiated

Boolean

true: Tracks the play action as user-initiated.

false: Tracks the play action as auto-initiated.

 

 Example

Video1.playVideo(true); 

The following example ad shows how the HTML5 Video Module is used. 

 Example

 

<!DOCTYPE html>

<!DOCTYPE html>

<html>

<link rel="stylesheet" media="all" href="style.css"/>

<body>

 

<script type="text/javascript">

EBModulesToLoad = ['Video']; // the video module reference MUST be defined before the EBloader call.

</script>

 

<script type="text/javascript" src="http://ds.serving-sys.com/BurstingScript/EBLoader.js"> //loads the EB object

</script>

 

<div id="videoDiv" style="border: 1px #FF9933 solid; background-image:url('images/default.jpg'); width: 297px; height:247px;" cellpadding="0"; cellspacing="0";>

<!-- Creating the video player on the ad - with the dimensions 300x400 , with native controls, and auto playing the video) -->

<video id="video3" width="300" height="240" controls="controls" autoplay="autoplay">

<source src="videos\EyeblasterVideo.mp4" type="video/mp4" />

<source src="videos\EyeblasterVideo.ogv" type="video/ogg" />

Your browser does not support the video tag.

</video>

</div>

 

<script type="text/javascript">

 

function clickMe(){

EB.clickthrough();

}

 

function checkInit() {

if (!EB.isInitialized()) {

EB.addEventListener(EBG.EventName.EB_INITIALIZED, wait); // checks if the EB object is initialized, if no - launches the funciton "wait" which loops back to the function "checkInit" until the EB object is initialized. if it is done initializing - will run the "onInit" function.

}

else {

onInit()

}

}

 

function onInit() {

myVideo = document.getElementById("video3"); //getting the video object Id (in this case "video3") and placing it in the variable "myVideo"

Video1 = new EBG.VideoModule(myVideo); // creating an instance of the video component on the page , which will track the "myVideo" object (which is actually "video3")

 

//myVideo.playVideo("true") will play the video and will track the play action as user-initiated.

}

 

function wait() { //loops back to the checkInit function until the EB object is initialized.

checkInit()

}

 

</script>

 

<script type="text/javascript">

checkInit()

</script>

 

</body>

</html>

 

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

Comments