HTML5 allows media to be embedded into HTML documents easily. There are no special plugins that you will have to add. However, you will have to be familiar with markup so you can grab the video element with javascript or jQuery.  

In this article:

Table of Contents Placeholder

 

Prerequisites

  • Besides HTML5 video elements on the page, none.

How it works

To access a video's property/event, you will have to find the id or selector specific to that video.

HTML 5 Video elements will look something like this sample code snippet below. As you can see the video id is nicely coded to be "video" in this case. Selectors vary based on implementation.

<video id="video" controls="" preload="none" poster="http://tealium.com/poster.png">

      <source id="mp4" src="http://tealium.com/video1.mp4" type="video/mp4">
      <source id="webm" src="http://tealium.com/video2.webm" type="video/webm">
      <source id="ogv" src="http://tealium.com/video3.ogv" type="video/ogg">

      <p>Your user agent does not support the HTML5 Video element.</p>
</video>

For a full list of properties and events please visit:
http://www.w3.org/2010/05/video/mediaevents.html

Here is a short list of some properties you can access:

currentTime Returns the length of the video in seconds.
currentSrc Returns the source address of the video.
videoWidth Returns width of video in pixels.
videoHeight Returns height of video in pixels.
ended Returns true if video has ended, false otherwise.
volume Returns a numeric value: 1 for highest level and decimal (float) 0.5 will be halfway volume level.
muted Returns true if video is muted, false otherwise.
paused Returns true if video is paused, false otherwise.
duration Returns length of the the video in seconds.

Here is a short list of common events that can fire:

play Play button pressed.
pause Pause button pressed.
ended Video ended.

Video Properties

Here is an example to grab video properties using Javascript&colon;

document.getElementById("selector_for_video").currentSrc;
//Sample Output: "http://media.w3.org/2010/05/sintel/trailer.mp4"

document.getElementById("selector_for_video").currentTime;
//Sample Output: 13.071441

Here is an example to grab video properties using JQuery:

jQuery("selector_for_video").prop("currentSrc");
//Sample Output: "http://media.w3.org/2010/05/sintel/trailer.mp4"

jQuery("selector_for_video").prop("currentTime");
//Sample Output: 13.071441

Property values can be stored in a data source and mapped to whatever tag you want this information sent. You can set values using the Javascript Extension or Set Data Values Extension.

Video Event Tracking

Here is an example to listen for video events then trigger utag.link calls:

//prevent double call of percentages from happening
var not_watched_25 = true;
var not_watched_50 = true;
var not_watched_75 = true;

//Event Tracking: Track when user hits play 
jQuery("video_selector_goes_here").on("play", function() {
  console.log("play clicked, duration:"+this.currentTime);
  current_time = this.currentTime;

  //utag.link({'event_type' : 'video', 'event_name': 'play', 'video_position': current_time});
})

//Track when users hit pause
jQuery("video_selector_goes_here").on("pause", function() {
  console.log("pause clicked, duration:"+this.currentTime);
  current_time = this.currentTime
  //utag.link({'event_type' : 'video', 'event_name': 'pause', 'video_position': current_time});
})

//Track when video has ended
jQuery("video_selector_goes_here").on("ended", function() {
  //utag.link({'event_type' : 'video', 'event_name': 'video_complete'});
  console.log("video ended");
  //reset values
  not_watched_25 = true;
  not_watched_50 = true;
  not_watched_75 = true;
})

//Track 25%, 50%, and 75% of video watched
jQuery("video_selector_goes_here").on("timeupdate", function() {
  var currentTime = jQuery("#video").prop("currentTime");
  var duration = jQuery("#video").prop("duration");
  //double percentages will occur because of calculations. ie. 25.1 % watched and 25.2%watched. 
  //when fixed to decimal places 25 occurs and then 25 occurs again. 
  //boolean value used to call pixel only once.
  var percentage_watched = (currentTime / duration) * 100;

  if ((percentage_watched.toFixed() == 25) && (not_watched_25 == true)) {
    console.log("watched 25%")
    //utag.link({'event_type' : 'video', 'event_action': '25% watched', 'video_milestone': '25%'});
    not_watched_25 = false;
  } else if ((percentage_watched.toFixed() == 50) && (not_watched_50 == true)) {
    console.log("watched 50%")
    //utag.link({'event_type' : 'video', 'event_action': '50% watched', 'video_milestone': '50%'});
    not_watched_50 = false;
  } else if ((percentage_watched.toFixed() == 75) && (not_watched_75 == true)) {
    console.log("watched 75%")
    //utag.link({'event_type' : 'video', 'event_action': '75% watched', 'video_milestone': '75%'});
    not_watched_75 = false;
  }

})

This code has the utag.link commented out.
There aren't any specific output variables specified above. They can all be customized to fit your video tracking needs. The names of the data sources can also be customized to fit any data sources created to track video.

Version history
Revision #:
5 of 5
Last update:
‎10-05-2020 12:13 PM
Updated by: