video js
HTML
<link rel="stylesheet" href="http://vjs.zencdn.net/4.12.11/video-js.css">
<script src="http://vjs.zencdn.net/4.12.11/video.js"></script>
<video id="video-1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}' data-tracking='{"omniVideoTracker": {"videoName": "Mandarin Oriental Promo Video", "interval" : 25, "player" : "Video.js Player"}}' >
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video>
JavaScript
/**
* @summary Video.js plugin for tracking video engagement with Adobe Analytics (formerly Site Catalyst, formerly Omniture...)
* @author Justin Emsoff, [email protected]
* @required video.js (http://www.videojs.com/), s_code.js
* @version 0.5
* @copyright Justin Emsoff 2014
* @license WTFPL (http://www.wtfpl.net/)
*/
(function() {
// Declare videojs plugin omniVideoTracker
videojs.plugin('omniVideoTracker', function(userOptions) {
var videoOptions, videoName, inTheBag, interval, seekEnd, seekBegin, isSeeking, sendbeacon, _trackingQueue, grabMeta, trackTimeupdate, trackEnd, trackPlay, trackPause, _sendCustom, _sendMedia, duration, playerName;
// Set default variable values
userOptions = userOptions || {};
// inTheBag will contain which of our intervals or milestones have been captured already.
inTheBag = [];
// _trackingQueue holds our events that are called before s is defined, which is then checked periodically for backlogged events.
_trackingQueue = [];
// Get the data-setup options from videojs element and apply to local variables for this current instance.
videoOptions = {};
if (this.options()["data-tracking"]) {
videoOptions = JSON.parse(this.options()["data-tracking"]).omniVideoTracker;
}
/**
* @desc Called on load of video, sets initial values for common variables.
*/
interval = videoOptions.interval || 10;
videoName = videoOptions.videoName || this.id();
playerName = videoOptions.player || 'Video.js Player';
console.log(playerName);
duration = Math.round(this.duration());
isSeeking = false;
seekBegin = seekEnd = 0;
/**
* @desc Called on timeupdate and triggers the Started, Interval, or Seeking beacons. Portions adapted from videojs-ga (https://github.com/mickey/videojs-ga).
*/
trackTimeupdate = function() {
var currentTime, counter, percent, percentComplete;
currentTime =...