var __extends = (this && this.__extends) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; ///<reference path="../../base/BaseClass.ts" /> ///<reference path="../MediaTracker.ts" /> ///<reference path="../IMediaTrackerConfigOptions.ts" /> ///<reference path="../../debug.ts" /> ///<reference path="../../util/DomHelper.ts" /> ///<reference path="../../util/ObjectUtils.ts" /> var econda; (function (econda) { var media; (function (media) { var helper; (function (helper) { var DomHelper = econda.util.DomHelper; var ObjectUtils = econda.util.ObjectUtils; /** * Helper to setup trackig for html5 video tag based media playback. * * Helpful links: * check player events: http://www.w3.org/2010/05/video/mediaevents.html * * Example: * * <!-- Our video --> * <video id="videoTagId" * controls="controls"> * <source src="./media-files/movies/trailer.mp4" /> * <source src="./media-files/movies/trailer.ogv" /> * <source src="./media-files/movies/trailer.webm" /> * * <p>Your Browser does not support the html video tag.</p> * </video> * * <!-- setup econda video tracking --> * <script type="text/javascript"> * * // enable debug output * econda.debug.setEnabled(true); * * // Setup player tracker * var trackingHelper = new econda.media.helper.HtmlVideoTracker({ * player: document.getElementById("videoTagId"), * tracker: {content: "HTML5 Example Video"} * }); * * </script> * * @class econda.media.helper.HtmlVideoTracker * @extends econda.base.BaseClass * @constructor Constructor * @param {Object} cfg Configuration options */ var HtmlVideoTracker = (function (_super) { __extends(HtmlVideoTracker, _super); function HtmlVideoTracker(cfg) { _super.call(this); /** * @cfg {econda.media.MediaTracker/Object} tracker Reference to tracker object or config options for a new tracker object. * @accessor */ this.tracker = null; /** * Reference to html video element. Element reference, element id or jQuery CSS selector (if jQuery is loaded). * getPlayer will always return the html element. * @cfg {HTMLVideoElement/String} player * @accessor */ this.player = null; this.__defaultProperty = "player"; /** * True as soon as we could read infos from player object. * (Duration, etc...) * @private * @property {Boolean} playerDataLoaded */ this.playerDataLoaded = false; /** * Data we wrote or have to write to tracker object * @private * @property {Object} trackerData */ this.trackerData = {}; this.cuedSeekedEvent = null; if (cfg instanceof HtmlVideoTracker) { return cfg; } this.initConfig(cfg); } HtmlVideoTracker.prototype.getTracker = function () { return this.tracker; }; HtmlVideoTracker.prototype.setTracker = function (tracker) { this.tracker = new econda.media.MediaTracker(tracker); // write cached data to tracker object this.updateTrackerData(); return this; }; HtmlVideoTracker.prototype.getPlayer = function () { return this.player; }; HtmlVideoTracker.prototype.setPlayer = function (domNodeOrId) { var domNode; if (!domNodeOrId) { econda.debug.error("No dom node given in HtmlVideoTracker.setPlayer()."); return this; } domNode = DomHelper.element(domNodeOrId); if (!domNode) { econda.debug.error("No dom node found with given element id: " + domNodeOrId); return this; } // check if it's a html video element if (typeof domNode.tagName == 'undefined' || domNode.tagName.toLowerCase() != 'video') { econda.debug.error("Given element is not an html video tag in setPlayer()."); return this; } this.player = domNode; this.addEventListeners(); return this; }; /** * Helper function to update tracker properties. * We can't do this directly because the tracker might be set * at a later time. You can call this function without parameters * to write all stored data to tracker. * * @method * @private * @param {String} property Property name to update * @param {Mixed} value Value to assign */ HtmlVideoTracker.prototype.updateTrackerData = function (property, value) { var _this = this; if (typeof property != 'undefined') { this.trackerData[property] = value; } if (this.tracker != null) { ObjectUtils.forEachOwnProperty(this.trackerData, function (value, key) { if (_this.tracker.get(key) === null) { _this.tracker.set(key, value); } }); this.trackerData = {}; } return this; }; /** * Add event listeners to assigned video element * @method * @private */ HtmlVideoTracker.prototype.addEventListeners = function () { var cmp = this; var e = this.player; e.addEventListener("loadeddata", function () { cmp.handleLoadedDataEvent.apply(cmp, arguments); }); e.addEventListener("seeking", function () { cmp.handleSeekingEvent.apply(cmp, arguments); }); e.addEventListener("seeked", function () { cmp.handleSeekedEvent.apply(cmp, arguments); }); e.addEventListener("play", function () { cmp.handlePlayEvent.apply(cmp, arguments); }); e.addEventListener("pause", function () { cmp.handlePauseEvent.apply(cmp, arguments); }); e.addEventListener("ended", function () { cmp.handleEndedEvent.apply(cmp, arguments); }); return this; }; /** * Read media uri, must return one full qualified uri using SSL * @returns {String} * @private */ HtmlVideoTracker.prototype.getPreviewUriFromPlayer = function () { if (this.player) { var previewUri = new econda.net.Uri(this.player.currentSrc); if (previewUri.getScheme() !== econda.net.Uri.SCHEME_HTTPS) { previewUri.setScheme(econda.net.Uri.SCHEME_HTTPS); } return previewUri.toString(); } return null; }; /** * Read duration * @returns {String} * @private */ HtmlVideoTracker.prototype.getDurationFromPlayer = function () { if (this.player) { return Math.floor(this.player.duration); } return null; }; /** * Read current time from player * @returns {Number} * @private */ HtmlVideoTracker.prototype.getCurrentTimeFromPlayer = function () { if (this.player) { return this.player.currentTime; } return null; }; /** * Handles the players loadeddata event * @method * @private * @param {Object} event Event object */ HtmlVideoTracker.prototype.handleLoadedDataEvent = function (event) { econda.debug.log("got loadeddata event"); this.updateTrackerData("duration", this.getDurationFromPlayer()); this.updateTrackerData("previewUri", this.getPreviewUriFromPlayer()); this.playerDataLoaded = true; // tracker should have all data now, so initialize it. if (this.tracker) { this.tracker.init(); } }; /** * Handle video "seeking" events * @method * @private * @param {Object} event Event object */ HtmlVideoTracker.prototype.handleSeekingEvent = function (event) { var t = this.tracker; econda.debug.log("got seeking event"); if (this.cuedSeekedEvent) { clearTimeout(this.cuedSeekedEvent); this.cuedSeekedEvent = null; } if (t) { t.setState("paused", this.getCurrentTimeFromPlayer()); } }; /** * Handle video "seeked" events * @method * @private * @param {Object} event Event object */ HtmlVideoTracker.prototype.handleSeekedEvent = function (event) { var t = this.tracker; econda.debug.log("got seeked event"); if (t) { var pos = this.getCurrentTimeFromPlayer(); this.cuedSeekedEvent = setTimeout(function () { t.setState("playing", pos); }, 250); } }; /** * Handle video "play" events * @method * @private * @param {Object} event Event object */ HtmlVideoTracker.prototype.handlePlayEvent = function (event) { var t = this.tracker; econda.debug.log("got play event"); if (t) { t.setState("playing", this.getCurrentTimeFromPlayer()); } }; /** * Handle video "pause" events * @method * @private * @param {Object} event Event object */ HtmlVideoTracker.prototype.handlePauseEvent = function (event) { var t = this.tracker; econda.debug.log("got pause event"); if (t) { t.setState("paused", this.getCurrentTimeFromPlayer()); } }; /** * Handle video "ended" events * @method * @private * @param {Object} event Event object */ HtmlVideoTracker.prototype.handleEndedEvent = function (event) { var t = this.tracker; econda.debug.log("got ended event"); if (t) { t.setState("stopped", this.getCurrentTimeFromPlayer()); } }; return HtmlVideoTracker; }(econda.base.BaseClass)); helper.HtmlVideoTracker = HtmlVideoTracker; })(helper = media.helper || (media.helper = {})); })(media = econda.media || (econda.media = {})); })(econda || (econda = {}));