Back

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.  

Name and type are not default properties of the embedded video. 

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

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

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 to.

You can set values using the Javascript Extension or Set Data Values Extension.

Video Event Tracking

Example to listen to video events and trigger potential 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;
  }

})

NOTES:

There aren't any specific output variables specified above. They can all be customized to fit your video tracking needs.

This code has commented out utag.link calls. The names of the data sources can also be customized to fit any data sources created to track video. 

Feel free to reach out if anything can be optimized or if anything is unclear