if(typeof econda.media.helper == 'undefined') {
econda.media.helper = {};
}
/**
* 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
*
* @markdown
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.Object
* @constructor Constructor
* @param {Object} cfg Configuration options
*/
econda.media.helper.HtmlVideoTracker = function(cfg)
{
var cmp = this;
cfg = cfg || {};
/**
* Private properties collection
* @property {Object} __p
* @private
*/
var __p = {
/**
* @cfg {econda.media.MediaTracker/Object} tracker Reference to tracker object or config options for a new tracker object.
*/
tracker: null,
/**
* @cfg {Object} player Reference to html video element
*/
player: null
};
this.__defaultProperty = "player";
/**
* Reference to element where we can get duration etc...
* video or source tag.
* @private
* @property {Object} ve
*/
var ve = null;
/**
* True as soon as we could read infos from player object.
* (Duration, etc...)
* @private
* @property {Boolean} playerDataLoaded
*/
var playerDataLoaded = false;
/**
* Data we wrote or have to write to tracker object
* @private
* @property {Object} trackerData
*/
var trackerData = {};
/**
* 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
*/
this.updateTrackerData = function(property, value)
{
if(typeof property != 'undefined') {
trackerData[property] = value;
}
if(typeof __p["tracker"] != 'undefined') {
__p["tracker"].set(trackerData);
}
return this;
};
/**
* Set tracker object or configuration. See constructor of MediaTracker object for details.
*
* // Example:
* ytTracker.setTracer({
* content: "Video Name",
* category: "/Example Videos"
* }
*
* @method
* @param {econda.media.MediaTracker/Object/String} tracker tracker object, tracker config or content name
*/
this.setTracker = function(tracker)
{
__p["tracker"] = new econda.media.MediaTracker(tracker);
// write cached data to tracker object
this.updateTrackerData();
return this;
};
/**
* Get tracker object
* @method
* @return {econda.media.MediaTracker}
*/
this.getTracker = function()
{
return __p["tracker"];
};
/**
* Set reference to html video element
* @method
* @param {Object/String} domNode Html video tag or element id
* @chainable
*/
this.setPlayer = function(domNodeOrId)
{
var domNode;
if(!domNodeOrId) {
econda.debug.error("No dom node given in HtmlVideoTracker.setPlayer().");
return this;
}
// get dom node if we've got a string (= element id)
if(typeof domNodeOrId == "string") {
domNode = document.getElementById(domNode);
if(!domNode) {
econda.debug.error("No dom node found with given element id: "+domNodeOrId)
return this;
}
} else {
domNode = domNodeOrId;
}
// 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;
}
__p["player"] = domNode;
ve = domNode;
this.addEventListeners();
return this;
};
/**
* Add event listeners to assigned video element
* @method
* @private
*/
this.addEventListeners = function()
{
var e = __p["player"];
e.addEventListener("loadeddata", cmp.handleLoadedDataEvent);
e.addEventListener("seeking", cmp.handleSeekingEvent);
e.addEventListener("seeked", cmp.handleSeekedEvent);
e.addEventListener("play", cmp.handlePlayEvent);
e.addEventListener("pause", cmp.handlePauseEvent);
e.addEventListener("ended", cmp.handleEndedEvent);
return this;
};
/**
* Handles the players loadeddata event
* @method
* @private
* @param {Object} event Event object
*/
this.handleLoadedDataEvent = function(event)
{
econda.debug.log("got loadeddata event");
cmp.updateTrackerData("duration", ve.duration);
playerDataLoaded = true;
// tracker should have all data now, so initialize it.
if(__p["tracker"]) {
__p["tracker"].init();
}
};
/**
* Handle video "seeking" events
* @method
* @private
* @param {Object} event Event object
*/
this.handleSeekingEvent = function(event)
{
var t = __p["tracker"];
econda.debug.log("got seeking event");
if(typeof cuedSeekedEvent != 'undefined') {
clearTimeout(cuedSeekedEvent);
delete cuedSeekedEvent;
}
if(t) {
t.setState("paused", ve.currentTime);
}
};
/**
* Handle video "seeked" events
* @method
* @private
* @param {Object} event Event object
*/
this.handleSeekedEvent = function(event)
{
var t = __p["tracker"];
econda.debug.log("got seeked event");
if(t) {
var pos = t.currentTime;
cuedSeekedEvent = setTimeout(function () {
t.setState("playing", pos);
}, 250);
}
};
/**
* Handle video "play" events
* @method
* @private
* @param {Object} event Event object
*/
this.handlePlayEvent = function(event)
{
var t = __p["tracker"];
econda.debug.log("got play event");
if(t) {
t.setState("playing", ve.currentTime);
}
};
/**
* Handle video "pause" events
* @method
* @private
* @param {Object} event Event object
*/
this.handlePauseEvent = function(event)
{
var t = __p["tracker"];
econda.debug.log("got pause event");
if(t) {
t.setState("paused", ve.currentTime);
}
};
/**
* Handle video "ended" events
* @method
* @private
* @param {Object} event Event object
*/
this.handleEndedEvent = function(event)
{
var t = __p["tracker"];
econda.debug.log("got ended event");
if(t) {
t.setState("stopped", ve.currentTime);
}
};
/**
* Return reference to html video element
* @method
*/
this.getPlayer = function()
{
return __p["player"];
};
return this.setup(cfg, __p);
};
econda.media.helper.HtmlVideoTracker.prototype = new econda.base.Object();