There are currently two ways of implementing the Vzaar Video Player:
<iframe allowFullScreen allowTransparency="true" class="vzaar-video-player" frameborder="0" height="240" id="vzvd-1556961" mozallowfullscreen name="vzvd-1556961" src="http://view.vzaar.com/1556961/player?apiOn=true" title="vzaar video player" type="text/html" webkitAllowFullScreen width="448"></iframe>
<div id='video-container'> <div class='vzaar_media_player'> <object data='http://view.vzaar.com/1080935/flashplayer' height='324' id='video' type='application/x-shockwave-flash' width='576'> <param name='allowFullScreen' value='true' /> <param name='allowScriptAccess' value='always' /> <param name='wmode' value='transparent' /> <param name='movie' value='http://view.vzaar.com/1080935/flashplayer' /> <param name='flashvars' value='apiOn=true&colourSet=grey&colourBg=#ffffff&border=none&socialSharing=0,0,0' /> <video controls='' height='324' id='vzvid' onclick='this.play();' poster='http://view.vzaar.com/1080935/image' preload='none' src='http://view.vzaar.com/1080935/video' width='576'></video> </object> </div> <div id='vid-info' style="font-family: Courier, monospace; font-size: 13px;"> <a href='#' id='addBookmark'>Add Bookmark</a> <a href='#' id='resetBookmark'>Reset Bookmark</a> </div> </div>
This needs to load before the event listener code is added. The best practice method for loading this file would be to have the client add the script block directly on the page before the utag.js file. Otherwise it can be added via JS Code Extension scoped to PreLoader or in a Tealium Custom Container Tag.
The attached script will work for both the html and iframe embed methods. This code needs to load as soon as possible so that the PlayerReady function is defined before the video is loaded. Once the video is loaded it will call the PlayerReady function, and the extension is not loaded before the video the tracking WILL NOT work.
This may introduce a race condition between the time the video is loaded and the time the PlayerReady function is defined. If the Tealium utag.js file is at the top of the body, as recommended, this shouldn't be a problem. However, if Tealium is coded at the bottom of the page there is more risk that you'll run into this issue.
If using the iframe embed code there is one nuance specific to this method.
Notice in the above sample iframe embed script that the "src" of the iframe has a parameter at the end of it that enables the tracking API for the event listeners:
This has to be appended to the end of the "src" or the tracking WILL NOT work.
This code will output a set of data sources that you can add in the UI and then use to send data to your tag vendors.
The variables are as follows:
Attached is a csv file with these variables and descriptions for easy uploading into the Data Sources tab of the Tealium UI.
NOTE: This code will call utag.link, but there are lines that are commented out that will support the Media Module for SiteCatalyst. The thought behind calling utag.link is then you'll have another extension that will determine when to call the Media Module functions so this extension is more "plug and play" with less customizations.
Vzaar Video Tracking Extension