HTML5 Player with Milestones
HTML5 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. http://video.marijka.com/milestone/html5-blog.html
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.
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.
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.
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.
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: http://www.w3.org/2010/05/video/mediaevents.html 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:
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 s.Media.open function (which initiates the Media Module object) and the s.Media.play function (which indicates that the video is now playing). The other video events follow a similar logic of setting either s.Media.play 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.
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.