HTML5 Player with Milestones

This post is part of an on-going series on video mea­sure­ment tips, tricks, and best practices.  This article was first published on the Adobe Digital Marketing Blog.

video7-playerHTML5 video player technology is gaining popularity because the player technology is supported across more browsers and devices than any other video player technology. In this post, we will look at how to implement video measurement for a very simple HTML5 video player.  I believe this example will provide you with the most basic explanation of how to add analytics to your HTML5 player. 

Most likely, if your video player is HTML5, it has additional code libraries associated with it that add enhancements and features beyond basic HTML code. If you are using this kind of enhanced HTML5 player, then the instructions within the Player Mapping area may need to be modified for your player.  Please check with the developers and documentation for the video player code you are using.

In the previous Flash Video Measurement post, I mentioned a growing trend for Flash players to be Hybrid players, where video playback will occur within Flash when available and fall-back to using an HTML5 video player in environments where Flash is not available.  Hybrid players have a very similar implementation to this HTML5 example; however, in the Player Mapping section, a Hybrid player will rely on the JavaScript API code rather than the standard HTML5 JavaScript.  Again, your video player developers should provide more documentation describing how to map the player.  

As covered in my basic implementation post, video tracking is all about the player technology.  The player is the unifying point for all things video, from metadata to playback location, making it the ideal place to add analytics code.

Getting Started

In order to implement video analytics for your HTML5 video player, you will need the following items:

Access to s_code.js file:  This solution requires the addition of code within the s_code.js file.

Ability to add code to your site: In addition to s_code changes, you may also need to add additional js code to the player.

The most recent version of the Media Module measurement library:  The Media Module JavaScript code is currently available through tag manager or from Client Care.

Measurement Plan

I am not going to cover the measurement plan here, but I strongly encourage you to map out what aspects of video playback you need to capture and select the SiteCatalyst variables you will use before you start modifying your code.  A measurement plan will help with implementation and provide documentation into the future.

Measurement Library

After designing a measurement plan, reach out to Client Care and request the latest version of the Media Module JavaScript code.  The Media Module will need to be added to your s_code file below the plug-ins area.  If you are using Tag Manager, then the Media Module code is available within Tag Manager by going to Product Code > SiteCatalyst > Video Tracking.  See an example of the Media Module in the s_code.js file for the sample player.

Player Mapping

In order for the Media Module library to know when video playback is happening, we need to map the HTML5 video events to the Media Module code.  There are two pieces to this, (1) adding event listeners and (2) calling the Media Module functions when the video events occur.  View source on the sample player to see the player mapping. 

The W3C has defined standards for video events.  More information is available here:  In my sample player I am looking for play, seeked, seeking, pause, and ended.  I have assigned my video player element on the page the id value of “movie”.  The chunk of code that looks for the video player events is the following:


In the same block of JavaScript, I am also mapping the player events to the Media Module functions.  For the start of the video, I am looking for the play event, and I am also checking the position of the player-head, to make sure the video is at the start of playback.  I need to do this because the play event can also be called after pausing or scrubbing.  I utilize the mediaOffset variable to store the player-head position.  You may also need to perform a similar check for video complete, depending on how your video player events are coded.

The basic logic goes, if the video play event fires, then check to see if the player-head is at 0, if it is at 0, then call the function (which initiates the Media Module object) and the function (which indicates that the video is now playing).  The other video events follow a similar logic of setting either or s.Media.stop, depending on whether the video event indicates the video playback has started or stopped.  When the video player reaches the end of the video, then we also need to send s.Media.close, which ends the Media Module object.

Seeking and buffering functionality are not well supported within standard HTML5 players at this time and will require additional player coding to work properly.  If you are using an enhanced HTML5 player, then additional seeking and buffering events are most likely provided as part of the video code.  Check your video player documentation.


Variable Mapping

Once you have your player events mapped to Media Module functions, the final step is to add the variable mapping to the s_code file.  Follow your measurement plan for proper frequency and variable usage.  In the sample player I am setting quartiles and also adding two additional eVars to track page name and athlete name for each video call.


A few things to note about this sample code:

Enable Video Tracking:  I recommend wrapping the variable mapping in a true/false variable.  In this example I am using s.enableVideoTracking.  This allows a developer to easily turn on and off the video tracking and also contains the variable mapping within one function.

Track Vars:  Make sure to include all the variables and events in the s.Media.trackVars and s.Media.trackEvents variables or the variables may not show up in your tracking calls.

Auto Track:  s.Media.autoTrack is set to false because we added player specific event listeners in the player mapping code.

Media Monitor:  Media monitor is required to set the additional eVars for page name and athlete name.  If you are not setting additional variables, then media monitor can be left out of the code.  You can find out more about Media Monitor in the SiteCatalyst documentation. 


That completes the implementation steps.  Now simply load your files into a browser and use a packet sniffer to check the tracking calls.  The calls you see should match the calls outlined in your measurement plan.