/*! Video.js - HTML5 Video Player Version GENERATED_AT_BUILD LGPL v3 LICENSE INFO This file is part of Video.js. Copyright 2011 Zencoder, Inc. Video.js is free software: you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. Video.js is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with Video.js. If not, see . */ // Self-executing function to prevent global vars and help with minification ;(function(window, undefined){ var document = window.document;// HTML5 Shiv. Must be in to support older browsers. document.createElement("video");document.createElement("audio"); var VideoJS = function(id, addOptions, ready){ var tag; // Element of ID // Allow for element or ID to be passed in // String ID if (typeof id == "string") { // Adjust for jQuery ID syntax if (id.indexOf("#") === 0) { id = id.slice(1); } // If a player instance has already been created for this ID return it. if (_V_.players[id]) { return _V_.players[id]; // Otherwise get element for ID } else { tag = _V_.el(id) } // ID is a media element } else { tag = id; } // Check for a useable element if (!tag || !tag.nodeName) { // re: nodeName, could be a box div also throw new TypeError("The element or ID supplied is not valid. (VideoJS)"); // Returns } // Element may have a player attr referring to an already created player instance. // If not, set up a new player and return the instance. return tag.player || new _V_.Player(tag, addOptions, ready); }, // Shortcut _V_ = VideoJS, // CDN Version. Used to target right flash swf. CDN_VERSION = "GENERATED_CDN_VSN"; VideoJS.players = {}; VideoJS.options = { // Default order of fallback technology techOrder: ["html5","flash"], // techOrder: ["flash","html5"], html5: {}, flash: { swf: "http://vjs.zencdn.net/c/video-js.swf" }, // Default of web browser is 300x150. Should rely on source width/height. width: 300, height: 150, // defaultVolume: 0.85, defaultVolume: 0.00, // The freakin seaguls are driving me crazy! // Included control sets components: { "posterImage": {}, "textTrackDisplay": {}, "loadingSpinner": {}, "bigPlayButton": {}, "controlBar": {} } // components: [ // "poster", // "loadingSpinner", // "bigPlayButton", // { name: "controlBar", options: { // components: [ // "playToggle", // "fullscreenToggle", // "currentTimeDisplay", // "timeDivider", // "durationDisplay", // "remainingTimeDisplay", // { name: "progressControl", options: { // components: [ // { name: "seekBar", options: { // components: [ // "loadProgressBar", // "playProgressBar", // "seekHandle" // ]} // } // ]} // }, // { name: "volumeControl", options: { // components: [ // { name: "volumeBar", options: { // components: [ // "volumeLevel", // "volumeHandle" // ]} // } // ]} // }, // "muteToggle" // ] // }}, // "subtitlesDisplay"/*, "replay"*/ // ] }; // Set CDN Version of swf if (CDN_VERSION != "GENERATED_CDN_VSN") { _V_.options.flash.swf = "http://vjs.zencdn.net/"+CDN_VERSION+"/video-js.swf" }_V_.merge = function(obj1, obj2, safe){ // Make sure second object exists if (!obj2) { obj2 = {}; }; for (var attrname in obj2){ if (obj2.hasOwnProperty(attrname) && (!safe || !obj1.hasOwnProperty(attrname))) { obj1[attrname]=obj2[attrname]; } } return obj1; }; _V_.extend = function(obj){ this.merge(this, obj, true); }; _V_.extend({ tech: {}, // Holder for playback technology settings controlSets: {}, // Holder for control set definitions // Device Checks isIE: function(){ return !+"\v1"; }, isFF: function(){ return !!_V_.ua.match("Firefox") }, isIPad: function(){ return navigator.userAgent.match(/iPad/i) !== null; }, isIPhone: function(){ return navigator.userAgent.match(/iPhone/i) !== null; }, isIOS: function(){ return VideoJS.isIPhone() || VideoJS.isIPad(); }, iOSVersion: function() { var match = navigator.userAgent.match(/OS (\d+)_/i); if (match && match[1]) { return match[1]; } }, isAndroid: function(){ return navigator.userAgent.match(/Android.*AppleWebKit/i) !== null; }, androidVersion: function() { var match = navigator.userAgent.match(/Android (\d+)\./i); if (match && match[1]) { return match[1]; } }, testVid: document.createElement("video"), ua: navigator.userAgent, support: {}, each: function(arr, fn){ if (!arr || arr.length === 0) { return; } for (var i=0,j=arr.length; i 0 || gh > 0) ? h + ":" : ""; // If hours are showing, we may need to add a leading zero. // Always show at least one digit of minutes. m = (((h || gm >= 10) && m < 10) ? "0" + m : m) + ":"; // Check if leading zero is need for seconds s = (s < 10) ? "0" + s : s; return h + m + s; }, uc: function(string){ return string.charAt(0).toUpperCase() + string.slice(1); }, // Return the relative horizonal position of an event as a value from 0-1 getRelativePosition: function(x, relativeElement){ return Math.max(0, Math.min(1, (x - _V_.findPosX(relativeElement)) / relativeElement.offsetWidth)); }, getComputedStyleValue: function(element, style){ return window.getComputedStyle(element, null).getPropertyValue(style); }, trim: function(string){ return string.toString().replace(/^\s+/, "").replace(/\s+$/, ""); }, round: function(num, dec) { if (!dec) { dec = 0; } return Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); }, isEmpty: function(object) { for (var prop in object) { return false; } return true; }, // Mimic HTML5 TimeRange Spec. createTimeRange: function(start, end){ return { length: 1, start: function() { return start; }, end: function() { return end; } }; }, /* Element Data Store. Allows for binding data to an element without putting it directly on the element. Ex. Event listneres are stored here. (also from jsninja.com) ================================================================================ */ cache: {}, // Where the data is stored guid: 1, // Unique ID for the element expando: "vdata" + (new Date).getTime(), // Unique attribute to store element's guid in // Returns the cache object where data for the element is stored getData: function(elem){ var id = elem[_V_.expando]; if (!id) { id = elem[_V_.expando] = _V_.guid++; _V_.cache[id] = {}; } return _V_.cache[id]; }, // Delete data for the element from the cache and the guid attr from element removeData: function(elem){ var id = elem[_V_.expando]; if (!id) { return; } // Remove all stored data delete _V_.cache[id]; // Remove the expando property from the DOM node try { delete elem[_V_.expando]; } catch(e) { if (elem.removeAttribute) { elem.removeAttribute(_V_.expando); } else { // IE doesn't appear to support removeAttribute on the document element elem[_V_.expando] = null; } } }, /* Proxy (a.k.a Bind or Context). A simple method for changing the context of a function It also stores a unique id on the function so it can be easily removed from events ================================================================================ */ proxy: function(context, fn, uid) { // Make sure the function has a unique ID if (!fn.guid) { fn.guid = _V_.guid++; } // Create the new function that changes the context var ret = function() { return fn.apply(context, arguments); } // Allow for the ability to individualize this function // Needed in the case where multiple objects might share the same prototype // IF both items add an event listener with the same function, then you try to remove just one // it will remove both because they both have the same guid. // when using this, you need to use the proxy method when you remove the listener as well. ret.guid = (uid) ? uid + "_" + fn.guid : fn.guid; return ret; }, get: function(url, onSuccess, onError){ // if (netscape.security.PrivilegeManager.enablePrivilege) { // netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); // } var local = (url.indexOf("file:") == 0 || (window.location.href.indexOf("file:") == 0 && url.indexOf("http:") == -1)); if (typeof XMLHttpRequest == "undefined") { XMLHttpRequest = function () { try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {} try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (f) {} try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (g) {} throw new Error("This browser does not support XMLHttpRequest."); }; } var request = new XMLHttpRequest(); try { request.open("GET", url); } catch(e) { _V_.log("VideoJS XMLHttpRequest (open)", e); // onError(e); return false; } request.onreadystatechange = _V_.proxy(this, function() { if (request.readyState == 4) { if (request.status == 200 || local && request.status == 0) { onSuccess(request.responseText); } else { if (onError) { onError(); } } } }); try { request.send(); } catch(e) { _V_.log("VideoJS XMLHttpRequest (send)", e); if (onError) { onError(e); } } }, /* Local Storage ================================================================================ */ setLocalStorage: function(key, value){ // IE was throwing errors referencing the var anywhere without this var localStorage = window.localStorage || false; if (!localStorage) { return; } try { localStorage[key] = value; } catch(e) { if (e.code == 22 || e.code == 1014) { // Webkit == 22 / Firefox == 1014 _V_.log("LocalStorage Full (VideoJS)", e); } else { _V_.log("LocalStorage Error (VideoJS)", e); } } }, // Get abosolute version of relative URL. Used to tell flash correct URL. // http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue getAbsoluteURL: function(url){ // Check if absolute URL if (!url.match(/^https?:\/\//)) { // Convert to absolute URL. Flash hosted off-site needs an absolute URL. url = _V_.createElement('div', { innerHTML: 'x' }).firstChild.href; } return url; } }); // usage: log('inside coolFunc', this, arguments); // paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/ _V_.log = function(){ _V_.log.history = _V_.log.history || [];// store logs to an array for reference _V_.log.history.push(arguments); if(window.console) { arguments.callee = arguments.callee.caller; var newarr = [].slice.call(arguments); (typeof console.log === 'object' ? _V_.log.apply.call(console.log, console, newarr) : console.log.apply(console, newarr)); } }; // make it safe to use console.log always (function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try {console.log();return window.console;}catch(err){return window.console={};}})()); // Offset Left // getBoundingClientRect technique from John Resig http://ejohn.org/blog/getboundingclientrect-is-awesome/ if ("getBoundingClientRect" in document.documentElement) { _V_.findPosX = function(el) { var box; try { box = el.getBoundingClientRect(); } catch(e) {} if (!box) { return 0; } var docEl = document.documentElement, body = document.body, clientLeft = docEl.clientLeft || body.clientLeft || 0, scrollLeft = window.pageXOffset || body.scrollLeft, left = box.left + scrollLeft - clientLeft; return left; }; } else { _V_.findPosX = function(el) { var curleft = el.offsetLeft; // _V_.log(obj.className, obj.offsetLeft) while(el = obj.offsetParent) { if (el.className.indexOf("video-js") == -1) { // _V_.log(el.offsetParent, "OFFSETLEFT", el.offsetLeft) // _V_.log("-webkit-full-screen", el.webkitMatchesSelector("-webkit-full-screen")); // _V_.log("-webkit-full-screen", el.querySelectorAll(".video-js:-webkit-full-screen")); } else { } curleft += el.offsetLeft; } return curleft; }; }// Javascript JSON implementation // https://github.com/douglascrockford/JSON-js/blob/master/json2.js var JSON; if (!JSON) { JSON = {}; } (function () { function f(n) { // Format integers to have at least two digits. return n < 10 ? '0' + n : n; } if (typeof Date.prototype.toJSON !== 'function') { Date.prototype.toJSON = function (key) { return isFinite(this.valueOf()) ? this.getUTCFullYear() + '-' + f(this.getUTCMonth() + 1) + '-' + f(this.getUTCDate()) + 'T' + f(this.getUTCHours()) + ':' + f(this.getUTCMinutes()) + ':' + f(this.getUTCSeconds()) + 'Z' : null; }; String.prototype.toJSON = Number.prototype.toJSON = Boolean.prototype.toJSON = function (key) { return this.valueOf(); }; } var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, gap, indent, meta = { // table of character substitutions '\b': '\\b', '\t': '\\t', '\n': '\\n', '\f': '\\f', '\r': '\\r', '"' : '\\"', '\\': '\\\\' }, rep; function quote(string) { escapable.lastIndex = 0; return escapable.test(string) ? '"' + string.replace(escapable, function (a) { var c = meta[a]; return typeof c === 'string' ? c : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); }) + '"' : '"' + string + '"'; } function str(key, holder) { var i, // The loop counter. k, // The member key. v, // The member value. length, mind = gap, partial, value = holder[key]; if (value && typeof value === 'object' && typeof value.toJSON === 'function') { value = value.toJSON(key); } if (typeof rep === 'function') { value = rep.call(holder, key, value); } switch (typeof value) { case 'string': return quote(value); case 'number': return isFinite(value) ? String(value) : 'null'; case 'boolean': case 'null': return String(value); case 'object': if (!value) { return 'null'; } gap += indent; partial = []; if (Object.prototype.toString.apply(value) === '[object Array]') { length = value.length; for (i = 0; i < length; i += 1) { partial[i] = str(i, value) || 'null'; } v = partial.length === 0 ? '[]' : gap ? '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']' : '[' + partial.join(',') + ']'; gap = mind; return v; } if (rep && typeof rep === 'object') { length = rep.length; for (i = 0; i < length; i += 1) { if (typeof rep[i] === 'string') { k = rep[i]; v = str(k, value); if (v) { partial.push(quote(k) + (gap ? ': ' : ':') + v); } } } } else { for (k in value) { if (Object.prototype.hasOwnProperty.call(value, k)) { v = str(k, value); if (v) { partial.push(quote(k) + (gap ? ': ' : ':') + v); } } } } v = partial.length === 0 ? '{}' : gap ? '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}' : '{' + partial.join(',') + '}'; gap = mind; return v; } } if (typeof JSON.stringify !== 'function') { JSON.stringify = function (value, replacer, space) { var i; gap = ''; indent = ''; if (typeof space === 'number') { for (i = 0; i < space; i += 1) { indent += ' '; } } else if (typeof space === 'string') { indent = space; } rep = replacer; if (replacer && typeof replacer !== 'function' && (typeof replacer !== 'object' || typeof replacer.length !== 'number')) { throw new Error('JSON.stringify'); } return str('', {'': value}); }; } if (typeof JSON.parse !== 'function') { JSON.parse = function (text, reviver) { var j; function walk(holder, key) { var k, v, value = holder[key]; if (value && typeof value === 'object') { for (k in value) { if (Object.prototype.hasOwnProperty.call(value, k)) { v = walk(value, k); if (v !== undefined) { value[k] = v; } else { delete value[k]; } } } } return reviver.call(holder, key, value); } text = String(text); cx.lastIndex = 0; if (cx.test(text)) { text = text.replace(cx, function (a) { return '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); }); } if (/^[\],:{}\s]*$/ .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@') .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']') .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) { j = eval('(' + text + ')'); return typeof reviver === 'function' ? walk({'': j}, '') : j; } throw new SyntaxError('JSON.parse'); }; } }()); // Event System (J.Resig - Secrets of a JS Ninja http://jsninja.com/ [Go read it, really]) // (Book version isn't completely usable, so fixed some things and borrowed from jQuery where it's working) // // This should work very similarly to jQuery's events, however it's based off the book version which isn't as // robust as jquery's, so there's probably some differences. // // When you add an event listener using _V_.addEvent, // it stores the handler function in seperate cache object, // and adds a generic handler to the element's event, // along with a unique id (guid) to the element. _V_.extend({ // Add an event listener to element // It stores the handler function in a separate cache object // and adds a generic handler to the element's event, // along with a unique id (guid) to the element. on: function(elem, type, fn){ var data = _V_.getData(elem), handlers; // We only need to generate one handler per element if (data && !data.handler) { // Our new meta-handler that fixes the event object and the context data.handler = function(event){ event = _V_.fixEvent(event); var handlers = _V_.getData(elem).events[event.type]; // Go through and call all the real bound handlers if (handlers) { // Copy handlers so if handlers are added/removed during the process it doesn't throw everything off. var handlersCopy = []; _V_.each(handlers, function(handler, i){ handlersCopy[i] = handler; }) for (var i = 0, l = handlersCopy.length; i < l; i++) { handlersCopy[i].call(elem, event); } } }; } // We need a place to store all our event data if (!data.events) { data.events = {}; } // And a place to store the handlers for this event type handlers = data.events[type]; if (!handlers) { handlers = data.events[ type ] = []; // Attach our meta-handler to the element, since one doesn't exist if (document.addEventListener) { elem.addEventListener(type, data.handler, false); } else if (document.attachEvent) { elem.attachEvent("on" + type, data.handler); } } if (!fn.guid) { fn.guid = _V_.guid++; } handlers.push(fn); }, // Deprecated name for 'on' function addEvent: function(){ return _V_.on.apply(this, arguments); }, off: function(elem, type, fn) { var data = _V_.getData(elem), handlers; // If no events exist, nothing to unbind if (!data.events) { return; } // Are we removing all bound events? if (!type) { for (type in data.events) { _V_.cleanUpEvents(elem, type); } return; } // And a place to store the handlers for this event type handlers = data.events[type]; // If no handlers exist, nothing to unbind if (!handlers) { return; } // See if we're only removing a single handler if (fn && fn.guid) { for (var i = 0; i < handlers.length; i++) { // We found a match (don't stop here, there could be a couple bound) if (handlers[i].guid === fn.guid) { // Remove the handler from the array of handlers handlers.splice(i--, 1); } } } _V_.cleanUpEvents(elem, type); }, // Deprecated name for 'on' function removeEvent: function(){ return _V_.off.apply(this, arguments); }, cleanUpEvents: function(elem, type) { var data = _V_.getData(elem); // Remove the events of a particular type if there are none left if (data.events[type].length === 0) { delete data.events[type]; // Remove the meta-handler from the element if (document.removeEventListener) { elem.removeEventListener(type, data.handler, false); } else if (document.detachEvent) { elem.detachEvent("on" + type, data.handler); } } // Remove the events object if there are no types left if (_V_.isEmpty(data.events)) { delete data.events; delete data.handler; } // Finally remove the expando if there is no data left if (_V_.isEmpty(data)) { _V_.removeData(elem); } }, fixEvent: function(event) { if (event[_V_.expando]) { return event; } // store a copy of the original event object // and "clone" to set read-only properties var originalEvent = event; event = new _V_.Event(originalEvent); for ( var i = _V_.Event.props.length, prop; i; ) { prop = _V_.Event.props[ --i ]; event[prop] = originalEvent[prop]; } // Fix target property, if necessary if (!event.target) { event.target = event.srcElement || document; } // check if target is a textnode (safari) if (event.target.nodeType === 3) { event.target = event.target.parentNode; } // Add relatedTarget, if necessary if (!event.relatedTarget && event.fromElement) { event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement; } // Calculate pageX/Y if missing and clientX/Y available if ( event.pageX == null && event.clientX != null ) { var eventDocument = event.target.ownerDocument || document, doc = eventDocument.documentElement, body = eventDocument.body; event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0); } // Add which for key events if (event.which == null && (event.charCode != null || event.keyCode != null)) { event.which = event.charCode != null ? event.charCode : event.keyCode; } // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs) if ( !event.metaKey && event.ctrlKey ) { event.metaKey = event.ctrlKey; } // Add which for click: 1 === left; 2 === middle; 3 === right // Note: button is not normalized, so don't use it if ( !event.which && event.button !== undefined ) { event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) )); } return event; }, trigger: function(elem, event) { var data = _V_.getData(elem), parent = elem.parentNode || elem.ownerDocument, type = event.type || event, handler; if (data) { handler = data.handler } // Added in attion to book. Book code was broke. event = typeof event === "object" ? event[_V_.expando] ? event : new _V_.Event(type, event) : new _V_.Event(type); event.type = type; if (handler) { handler.call(elem, event); } // Clean up the event in case it is being reused event.result = undefined; event.target = elem; // Bubble the event up the tree to the document, // Unless it's been explicitly stopped // if (parent && !event.isPropagationStopped()) { // _V_.triggerEvent(parent, event); // // // We're at the top document so trigger the default action // } else if (!parent && !event.isDefaultPrevented()) { // // log(type); // var targetData = _V_.getData(event.target); // // log(targetData); // var targetHandler = targetData.handler; // // log("2"); // if (event.target[event.type]) { // // Temporarily disable the bound handler, // // don't want to execute it twice // if (targetHandler) { // targetData.handler = function(){}; // } // // // Trigger the native event (click, focus, blur) // event.target[event.type](); // // // Restore the handler // if (targetHandler) { // targetData.handler = targetHandler; // } // } // } }, // Deprecated name for 'on' function triggerEvent: function(){ return _V_.trigger.apply(this, arguments); }, one: function(elem, type, fn) { _V_.on(elem, type, function(){ _V_.off(elem, type, arguments.callee) fn.apply(this, arguments); }); } }); // Custom Event object for standardizing event objects between browsers. _V_.Event = function(src, props){ // Event object if (src && src.type) { this.originalEvent = src; this.type = src.type; // Events bubbling up the document may have been marked as prevented // by a handler lower down the tree; reflect the correct value. this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false || src.getPreventDefault && src.getPreventDefault()) ? returnTrue : returnFalse; // Event type } else { this.type = src; } // Put explicitly provided properties onto the event object if (props) { _V_.merge(this, props); } this.timeStamp = (new Date).getTime(); // Mark it as fixed this[_V_.expando] = true; }; _V_.Event.prototype = { preventDefault: function() { this.isDefaultPrevented = returnTrue; var e = this.originalEvent; if (!e) { return; } // if preventDefault exists run it on the original event if (e.preventDefault) { e.preventDefault(); // otherwise set the returnValue property of the original event to false (IE) } else { e.returnValue = false; } }, stopPropagation: function() { this.isPropagationStopped = returnTrue; var e = this.originalEvent; if (!e) { return; } // if stopPropagation exists run it on the original event if (e.stopPropagation) { e.stopPropagation(); } // otherwise set the cancelBubble property of the original event to true (IE) e.cancelBubble = true; }, stopImmediatePropagation: function() { this.isImmediatePropagationStopped = returnTrue; this.stopPropagation(); }, isDefaultPrevented: returnFalse, isPropagationStopped: returnFalse, isImmediatePropagationStopped: returnFalse }; _V_.Event.props = "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "); function returnTrue(){ return true; } function returnFalse(){ return false; } // Using John Resig's Class implementation http://ejohn.org/blog/simple-javascript-inheritance/ // (function(){var initializing=false, fnTest=/xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; _V_.Class = function(){}; _V_.Class.extend = function(prop) { var _super = this.prototype; initializing = true; var prototype = new this(); initializing = false; for (var name in prop) { prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn){ return function() { var tmp = this._super; this._super = _super[name]; var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; } function Class() { if ( !initializing && this.init ) this.init.apply(this, arguments); } Class.prototype = prototype; Class.constructor = Class; Class.extend = arguments.callee; return Class;};})(); (function(){ var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; _V_.Class = function(){}; _V_.Class.extend = function(prop) { var _super = this.prototype; initializing = true; var prototype = new this(); initializing = false; for (var name in prop) { prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn){ return function() { var tmp = this._super; this._super = _super[name]; var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; } function Class() { if ( !initializing && this.init ) { return this.init.apply(this, arguments); // Attempting to recreate accessing function form of class. } else if (!initializing) { return arguments.callee.prototype.init() } } Class.prototype = prototype; Class.constructor = Class; Class.extend = arguments.callee; return Class; }; })(); /* Player Component- Base class for all UI objects ================================================================================ */ _V_.Component = _V_.Class.extend({ init: function(player, options){ this.player = player; // Allow for overridding default component options options = this.options = _V_.merge(this.options || {}, options); // Create element if one wasn't provided in options if (options.el) { this.el = options.el; } else { this.el = this.createElement(); } // Add any components in options this.initComponents(); }, destroy: function(){}, createElement: function(type, attrs){ return _V_.createElement(type || "div", attrs); }, buildCSSClass: function(){ // Child classes can include a function that does: // return "CLASS NAME" + this._super(); return ""; }, initComponents: function(){ var options = this.options; if (options && options.components) { // Loop through components and add them to the player this.eachProp(options.components, function(name, opts){ // Allow for disabling default components // e.g. _V_.options.components.posterImage = false if (opts === false) return; // Allow waiting to add components until a specific event is called var tempAdd = this.proxy(function(){ // Set property name on player. Could cause conflicts with other prop names, but it's worth making refs easy. this[name] = this.addComponent(name, opts); }); if (opts.loadEvent) { this.one(opts.loadEvent, tempAdd) } else { tempAdd(); } }); } }, // Add child components to this component. // Will generate a new child component and then append child component's element to this component's element. // Takes either the name of the UI component class, or an object that contains a name, UI Class, and options. addComponent: function(name, options){ var component, componentClass; // If string, create new component with options if (typeof name == "string") { // Make sure options is at least an empty object to protect against errors options = options || {}; // Assume name of set is a lowercased name of the UI Class (PlayButton, etc.) componentClass = options.componentClass || _V_.uc(name); // Create a new object & element for this controls set // If there's no .player, this is a player component = new _V_[componentClass](this.player || this, options); } else { component = name; } // Add the UI object's element to the container div (box) this.el.appendChild(component.el); // Return so it can stored on parent object if desired. return component; }, removeComponent: function(component){ this.el.removeChild(component.el); }, /* Display ================================================================================ */ show: function(){ this.el.style.display = "block"; }, hide: function(){ this.el.style.display = "none"; }, fadeIn: function(){ this.removeClass("vjs-fade-out"); this.addClass("vjs-fade-in"); }, fadeOut: function(){ this.removeClass("vjs-fade-in"); this.addClass("vjs-fade-out"); }, lockShowing: function(){ var style = this.el.style; style.display = "block"; style.opacity = 1; style.visiblity = "visible"; }, unlockShowing: function(){ var style = this.el.style; style.display = ""; style.opacity = ""; style.visiblity = ""; }, addClass: function(classToAdd){ _V_.addClass(this.el, classToAdd); }, removeClass: function(classToRemove){ _V_.removeClass(this.el, classToRemove); }, /* Events ================================================================================ */ on: function(type, fn, uid){ _V_.on(this.el, type, _V_.proxy(this, fn)); return this; }, // Deprecated name for 'on' function addEvent: function(){ return this.on.apply(this, arguments); }, off: function(type, fn){ _V_.off(this.el, type, fn); return this; }, // Deprecated name for 'off' function removeEvent: function(){ return this.off.apply(this, arguments); }, trigger: function(type, e){ _V_.trigger(this.el, type, e); return this; }, // Deprecated name for 'off' function triggerEvent: function(){ return this.trigger.apply(this, arguments); }, one: function(type, fn) { _V_.one(this.el, type, _V_.proxy(this, fn)); return this; }, /* Ready - Trigger functions when component is ready ================================================================================ */ ready: function(fn){ if (!fn) return this; if (this.isReady) { fn.call(this); } else { if (this.readyQueue === undefined) { this.readyQueue = []; } this.readyQueue.push(fn); } return this; }, triggerReady: function(){ this.isReady = true; if (this.readyQueue && this.readyQueue.length > 0) { // Call all functions in ready queue this.each(this.readyQueue, function(fn){ fn.call(this); }); // Reset Ready Queue this.readyQueue = []; // Allow for using event listeners also, in case you want to do something everytime a source is ready. this.trigger("ready"); } }, /* Utility ================================================================================ */ each: function(arr, fn){ _V_.each.call(this, arr, fn); }, eachProp: function(obj, fn){ _V_.eachProp.call(this, obj, fn); }, extend: function(obj){ _V_.merge(this, obj) }, // More easily attach 'this' to functions proxy: function(fn, uid){ return _V_.proxy(this, fn, uid); } });/* UI Component- Base class for all UI objects ================================================================================ */ _V_.Player = _V_.Component.extend({ init: function(tag, addOptions, ready){ this.tag = tag; // Store the original tag used to set options var el = this.el = _V_.createElement("div"), // Div to contain video and controls options = this.options = {}; // Set Options _V_.merge(options, _V_.options); // Copy Global Defaults _V_.merge(options, this.getVideoTagSettings()); // Override with Video Tag Options _V_.merge(options, addOptions); // Override/extend with options from setup call // Store controls setting, and then remove immediately so native controls don't flash. tag.removeAttribute("controls"); // Poster will be handled by a manual if (!options.nativeposter) tag.removeAttribute("poster"); // Make player findable on elements tag.player = el.player = this; // Make sure tag ID exists tag.id = tag.id || "vjs_video_" + _V_.guid++; // Give video tag properties to box // ID will now reference box, not the video tag this.id = el.id = tag.id; el.className = tag.className; // Make player easily findable by ID _V_.players[el.id] = this; // Make box use width/height of tag, or default 300x150 // Enforce with CSS since width/height attrs don't work on divs this.width(options.width, true); // (true) Skip resize listener on load this.height(options.height, true); // Update tag id/class for use as HTML5 playback tech // Might think we should do this after embedding in container so .vjs-tech class // doesn't flash 100% width/height, but class only applies with .video-js parent tag.id += "_html5_api"; tag.className = "vjs-tech"; // Remove width/height attrs from tag so CSS can make it 100% width/height tag.removeAttribute("width"); tag.removeAttribute("height"); // Wrap video tag in div (el/box) container tag.parentNode.insertBefore(el, tag); el.appendChild(tag); // Breaks iPhone, fixed in HTML5 setup. // Empty video tag sources and tracks so the built-in player doesn't use them also. if (tag.hasChildNodes()) { var nrOfChildNodes = tag.childNodes.length; for (var i=0,j=tag.childNodes;i 0) { this.addTextTracks(options.tracks); } // If there are no sources when the player is initialized, // load the first supported playback technology. if (!options.sources || options.sources.length == 0) { for (var i=0,j=options.techOrder; i 0) { techOptions.startTime = this.values.currentTime; } this.values.src = source.src; } // Initialize tech instance this.tech = new _V_[techName](this, techOptions); this.tech.ready(techReady); }, unloadTech: function(){ this.tech.destroy(); // Turn off any manual progress or timeupdate tracking if (this.manualProgress) { this.manualProgressOff(); } if (this.manualTimeUpdates) { this.manualTimeUpdatesOff(); } this.tech = false; }, // There's many issues around changing the size of a Flash (or other plugin) object. // First is a plugin reload issue in Firefox that has been around for 11 years: https://bugzilla.mozilla.org/show_bug.cgi?id=90268 // Then with the new fullscreen API, Mozilla and webkit browsers will reload the flash object after going to fullscreen. // To get around this, we're unloading the tech, caching source and currentTime values, and reloading the tech once the plugin is resized. // reloadTech: function(betweenFn){ // _V_.log("unloadingTech") // this.unloadTech(); // _V_.log("unloadedTech") // if (betweenFn) { betweenFn.call(); } // _V_.log("LoadingTech") // this.loadTech(this.techName, { src: this.values.src }) // _V_.log("loadedTech") // }, /* Fallbacks for unsupported event types ================================================================================ */ // Manually trigger progress events based on changes to the buffered amount // Many flash players and older HTML5 browsers don't send progress or progress-like events manualProgressOn: function(){ this.manualProgress = true; // Trigger progress watching when a source begins loading this.trackProgress(); // Watch for a native progress event call on the tech element // In HTML5, some older versions don't support the progress event // So we're assuming they don't, and turning off manual progress if they do. this.tech.on("progress", function(){ // Remove this listener from the element this.removeEvent("progress", arguments.callee); // Update known progress support for this playback technology this.support.progressEvent = true; // Turn off manual progress tracking this.player.manualProgressOff(); }); }, manualProgressOff: function(){ this.manualProgress = false; this.stopTrackingProgress(); }, trackProgress: function(){ this.progressInterval = setInterval(_V_.proxy(this, function(){ // Don't trigger unless buffered amount is greater than last time // log(this.values.bufferEnd, this.buffered().end(0), this.duration()) /* TODO: update for multiple buffered regions */ if (this.values.bufferEnd < this.buffered().end(0)) { this.trigger("progress"); } else if (this.bufferedPercent() == 1) { this.stopTrackingProgress(); this.trigger("progress"); // Last update } }), 500); }, stopTrackingProgress: function(){ clearInterval(this.progressInterval); }, /* Time Tracking -------------------------------------------------------------- */ manualTimeUpdatesOn: function(){ this.manualTimeUpdates = true; this.on("play", this.trackCurrentTime); this.on("pause", this.stopTrackingCurrentTime); // timeupdate is also called by .currentTime whenever current time is set // Watch for native timeupdate event this.tech.on("timeupdate", function(){ // Remove this listener from the element this.removeEvent("timeupdate", arguments.callee); // Update known progress support for this playback technology this.support.timeupdateEvent = true; // Turn off manual progress tracking this.player.manualTimeUpdatesOff(); }); }, manualTimeUpdatesOff: function(){ this.manualTimeUpdates = false; this.stopTrackingCurrentTime(); this.removeEvent("play", this.trackCurrentTime); this.removeEvent("pause", this.stopTrackingCurrentTime); }, trackCurrentTime: function(){ if (this.currentTimeInterval) { this.stopTrackingCurrentTime(); } this.currentTimeInterval = setInterval(_V_.proxy(this, function(){ this.trigger("timeupdate"); }), 250); // 42 = 24 fps // 250 is what Webkit uses // FF uses 15 }, // Turn off play progress tracking (when paused or dragging) stopTrackingCurrentTime: function(){ clearInterval(this.currentTimeInterval); }, /* Player event handlers (how the player reacts to certain events) ================================================================================ */ onEnded: function(){ if (this.options.loop) { this.currentTime(0); this.play(); } else { this.pause(); } }, onPlay: function(){ _V_.removeClass(this.el, "vjs-paused"); _V_.addClass(this.el, "vjs-playing"); }, onPause: function(){ _V_.removeClass(this.el, "vjs-playing"); _V_.addClass(this.el, "vjs-paused"); }, onProgress: function(){ // Add custom event for when source is finished downloading. if (this.bufferedPercent() == 1) { this.trigger("loadedalldata"); } }, // Update duration with durationchange event // Allows for cacheing value instead of asking player each time. onDurationChange: function(){ this.duration(this.techGet("duration")); }, onError: function(e) { _V_.log("Video Error", e); }, /* Player API ================================================================================ */ // Pass values to the playback tech techCall: function(method, arg){ // If it's not ready yet, call method when it is if (!this.tech.isReady) { this.tech.ready(function(){ this[method](arg); }); // Otherwise call method now } else { try { this.tech[method](arg); } catch(e) { _V_.log(e); } } }, // Get calls can't wait for the tech, and sometimes don't need to. techGet: function(method){ // Make sure tech is ready if (this.tech.isReady) { // Flash likes to die and reload when you hide or reposition it. // In these cases the object methods go away and we get errors. // When that happens we'll catch the errors and inform tech that it's not ready any more. try { return this.tech[method](); } catch(e) { // When building additional tech libs, an expected method may not be defined yet if (this.tech[method] === undefined) { _V_.log("Video.js: " + method + " method not defined for "+this.techName+" playback technology.", e); } else { // When a method isn't available on the object it throws a TypeError if (e.name == "TypeError") { _V_.log("Video.js: " + method + " unavailable on "+this.techName+" playback technology element.", e); this.tech.isReady = false; } else { _V_.log(e); } } } } return; }, // Method for calling methods on the current playback technology // techCall: function(method, arg){ // // // if (this.isReady) { // // // // } else { // // _V_.log("The playback technology API is not ready yet. Use player.ready(myFunction)."+" ["+method+"]", arguments.callee.caller.arguments.callee.caller.arguments.callee.caller) // // return false; // // // throw new Error("The playback technology API is not ready yet. Use player.ready(myFunction)."+" ["+method+"]"); // // } // }, // http://dev.w3.org/html5/spec/video.html#dom-media-play play: function(){ this.techCall("play"); return this; }, // http://dev.w3.org/html5/spec/video.html#dom-media-pause pause: function(){ this.techCall("pause"); return this; }, // http://dev.w3.org/html5/spec/video.html#dom-media-paused // The initial state of paused should be true (in Safari it's actually false) paused: function(){ return (this.techGet("paused") === false) ? false : true; }, // http://dev.w3.org/html5/spec/video.html#dom-media-currenttime currentTime: function(seconds){ if (seconds !== undefined) { // Cache the last set value for smoother scrubbing. this.values.lastSetCurrentTime = seconds; this.techCall("setCurrentTime", seconds); // Improve the accuracy of manual timeupdates if (this.manualTimeUpdates) { this.trigger("timeupdate"); } return this; } // Cache last currentTime and return // Default to 0 seconds return this.values.currentTime = (this.techGet("currentTime") || 0); }, // http://dev.w3.org/html5/spec/video.html#dom-media-duration // Duration should return NaN if not available. ParseFloat will turn false-ish values to NaN. duration: function(seconds){ if (seconds !== undefined) { // Cache the last set value for optimiized scrubbing (esp. Flash) this.values.duration = parseFloat(seconds); return this; } return this.values.duration; }, // Calculates how much time is left. Not in spec, but useful. remainingTime: function(){ return this.duration() - this.currentTime(); }, // http://dev.w3.org/html5/spec/video.html#dom-media-buffered // Buffered returns a timerange object. Kind of like an array of portions of the video that have been downloaded. // So far no browsers return more than one range (portion) buffered: function(){ var buffered = this.techGet("buffered"), start = 0, end = this.values.bufferEnd = this.values.bufferEnd || 0, // Default end to 0 and store in values timeRange; if (buffered && buffered.length > 0 && buffered.end(0) !== end) { end = buffered.end(0); // Storing values allows them be overridden by setBufferedFromProgress this.values.bufferEnd = end; } return _V_.createTimeRange(start, end); }, // Calculates amount of buffer is full. Not in spec but useful. bufferedPercent: function(){ return (this.duration()) ? this.buffered().end(0) / this.duration() : 0; }, // http://dev.w3.org/html5/spec/video.html#dom-media-volume volume: function(percentAsDecimal){ var vol; if (percentAsDecimal !== undefined) { vol = Math.max(0, Math.min(1, parseFloat(percentAsDecimal))); // Force value to between 0 and 1 this.values.volume = vol; this.techCall("setVolume", vol); _V_.setLocalStorage("volume", vol); return this; } // Default to 1 when returning current volume. vol = parseFloat(this.techGet("volume")); return (isNaN(vol)) ? 1 : vol; }, // http://dev.w3.org/html5/spec/video.html#attr-media-muted muted: function(muted){ if (muted !== undefined) { this.techCall("setMuted", muted); return this; } return this.techGet("muted") || false; // Default to false }, // http://dev.w3.org/html5/spec/dimension-attributes.html#attr-dim-height // Video tag width/height only work in pixels. No percents. // But allowing limited percents use. e.g. width() will return number+%, not computed width width: function(num, skipListeners){ return this.dimension("width", num, skipListeners); }, height: function(num, skipListeners){ return this.dimension("height", num, skipListeners); }, // Set both width and height at the same time. size: function(width, height){ // Skip resize listeners on width for optimization return this.width(width, true).height(height); }, dimension: function(widthOrHeight, num, skipListeners){ if (num !== undefined) { // Cache on object to be returned. Shouldn't have any effect after CSS. this.el[widthOrHeight] = num; // Check if using percent width/height and adjust if ((""+num).indexOf("%") !== -1) { this.el.style[widthOrHeight] = num; } else { this.el.style[widthOrHeight] = num+"px"; } // skipListeners allows us to avoid triggering the resize event when setting both width and height if (!skipListeners) { this.trigger("resize"); } return this; } // Returns cached width/height in attribute. // Could make this return computed width and support %s. Not a small amount of work. return parseInt(this.el.getAttribute(widthOrHeight)); }, // Check if current tech can support native fullscreen (e.g. with built in controls lik iOS, so not our flash swf) supportsFullScreen: function(){ return this.techGet("supportsFullScreen") || false; }, // Turn on fullscreen (or window) mode requestFullScreen: function(){ var requestFullScreen = _V_.support.requestFullScreen; this.isFullScreen = true; // Check for browser element fullscreen support if (requestFullScreen) { // Trigger fullscreenchange event after change _V_.on(document, requestFullScreen.eventName, this.proxy(function(){ this.isFullScreen = document[requestFullScreen.isFullScreen]; // If cancelling fullscreen, remove event listener. if (this.isFullScreen == false) { _V_.removeEvent(document, requestFullScreen.eventName, arguments.callee); } this.trigger("fullscreenchange"); })); // Flash and other plugins get reloaded when you take their parent to fullscreen. // To fix that we'll remove the tech, and reload it after the resize has finished. if (this.tech.support.fullscreenResize === false && this.options.flash.iFrameMode != true) { this.pause(); this.unloadTech(); _V_.on(document, requestFullScreen.eventName, this.proxy(function(){ _V_.removeEvent(document, requestFullScreen.eventName, arguments.callee); this.loadTech(this.techName, { src: this.values.src }); })); this.el[requestFullScreen.requestFn](); } else { this.el[requestFullScreen.requestFn](); } } else if (this.tech.supportsFullScreen()) { this.trigger("fullscreenchange"); this.techCall("enterFullScreen"); } else { this.trigger("fullscreenchange"); this.enterFullWindow(); } return this; }, cancelFullScreen: function(){ var requestFullScreen = _V_.support.requestFullScreen; this.isFullScreen = false; // Check for browser element fullscreen support if (requestFullScreen) { // Flash and other plugins get reloaded when you take their parent to fullscreen. // To fix that we'll remove the tech, and reload it after the resize has finished. if (this.tech.support.fullscreenResize === false && this.options.flash.iFrameMode != true) { this.pause(); this.unloadTech(); _V_.on(document, requestFullScreen.eventName, this.proxy(function(){ _V_.removeEvent(document, requestFullScreen.eventName, arguments.callee); this.loadTech(this.techName, { src: this.values.src }) })); document[requestFullScreen.cancelFn](); } else { document[requestFullScreen.cancelFn](); } } else if (this.tech.supportsFullScreen()) { this.techCall("exitFullScreen"); this.trigger("fullscreenchange"); } else { this.exitFullWindow(); this.trigger("fullscreenchange"); } return this; }, // When fullscreen isn't supported we can stretch the video container to as wide as the browser will let us. enterFullWindow: function(){ this.isFullWindow = true; // Storing original doc overflow value to return to when fullscreen is off this.docOrigOverflow = document.documentElement.style.overflow; // Add listener for esc key to exit fullscreen _V_.on(document, "keydown", _V_.proxy(this, this.fullWindowOnEscKey)); // Hide any scroll bars document.documentElement.style.overflow = 'hidden'; // Apply fullscreen styles _V_.addClass(document.body, "vjs-full-window"); _V_.addClass(this.el, "vjs-fullscreen"); this.trigger("enterFullWindow"); }, fullWindowOnEscKey: function(event){ if (event.keyCode == 27) { if (this.isFullScreen == true) { this.cancelFullScreen(); } else { this.exitFullWindow(); } } }, exitFullWindow: function(){ this.isFullWindow = false; _V_.removeEvent(document, "keydown", this.fullWindowOnEscKey); // Unhide scroll bars. document.documentElement.style.overflow = this.docOrigOverflow; // Remove fullscreen styles _V_.removeClass(document.body, "vjs-full-window"); _V_.removeClass(this.el, "vjs-fullscreen"); // Resize the box, controller, and poster to original sizes // this.positionAll(); this.trigger("exitFullWindow"); }, selectSource: function(sources){ // Loop through each playback technology in the options order for (var i=0,j=this.options.techOrder;i