/*!
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= 10;
// return swfobject.hasFlashPlayerVersion("10");
};
_V_.flash.canPlaySource = function(srcObj){
if (srcObj.type in _V_.flash.prototype.support.formats) { return "maybe"; }
};
_V_.flash.prototype.support = {
formats: {
"video/flv": "FLV",
"video/x-flv": "FLV",
"video/mp4": "MP4",
"video/m4v": "MP4"
},
// Optional events that we can manually mimic with timers
progressEvent: false,
timeupdateEvent: false,
// Resizing plugins using request fullscreen reloads the plugin
fullscreenResize: false,
// Resizing plugins in Firefox always reloads the plugin (e.g. full window mode)
parentResize: !(_V_.ua.match("Firefox"))
};
_V_.flash.onReady = function(currSwf){
var el = _V_.el(currSwf);
// Get player from box
// On firefox reloads, el might already have a player
var player = el.player || el.parentNode.player,
tech = player.tech;
// Reference player on tech element
el.player = player;
// Update reference to playback technology element
tech.el = el;
// Now that the element is ready, make a click on the swf play the video
tech.addEvent("click", tech.onClick);
_V_.flash.checkReady(tech);
};
// The SWF isn't alwasy ready when it says it is. Sometimes the API functions still need to be added to the object.
// If it's not ready, we set a timeout to check again shortly.
_V_.flash.checkReady = function(tech){
// Check if API property exists
if (tech.el.vjs_getProperty) {
// If so, tell tech it's ready
tech.triggerReady();
// Otherwise wait longer.
} else {
setTimeout(function(){
_V_.flash.checkReady(tech);
}, 50);
}
};
// Trigger events from the swf on the player
_V_.flash.onEvent = function(swfID, eventName){
var player = _V_.el(swfID).player;
player.triggerEvent(eventName);
};
// Log errors from the swf
_V_.flash.onError = function(swfID, err){
var player = _V_.el(swfID).player;
player.triggerEvent("error");
_V_.log("Flash Error", err, swfID);
};
// Flash Version Check
_V_.flash.version = function(){
var version = '0,0,0';
// IE
try {
version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version').replace(/\D+/g, ',').match(/^,?(.+),?$/)[1];
// other browsers
} catch(e) {
try {
if (navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin){
version = (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]).description.replace(/\D+/g, ",").match(/^,?(.+),?$/)[1];
}
} catch(e) {}
}
return version.split(",");
};
// Flash embedding method. Only used in non-iframe mode
_V_.flash.embed = function(swf, placeHolder, flashVars, params, attributes){
var code = _V_.flash.getEmbedCode(swf, flashVars, params, attributes),
// Get element by embedding code and retrieving created element
obj = _V_.createElement("div", { innerHTML: code }).childNodes[0],
par = placeHolder.parentNode
;
placeHolder.parentNode.replaceChild(obj, placeHolder);
// IE6 seems to have an issue where it won't initialize the swf object after injecting it.
// This is a dumb temporary fix
if (_V_.isIE()) {
var newObj = par.childNodes[0];
setTimeout(function(){
newObj.style.display = "block";
}, 1000);
}
return obj;
};
_V_.flash.getEmbedCode = function(swf, flashVars, params, attributes){
var objTag = '';
});
attributes = _V_.merge({
// Add swf to attributes (need both for IE and Others to work)
data: swf,
// Default to 100% width/height
width: "100%",
height: "100%"
}, attributes);
// Create Attributes string
_V_.eachProp(attributes, function(key, val){
attrsString += (key + '="' + val + '" ');
});
return objTag + attrsString + '>' + paramsString + '';
};
/* VideoJS-YouTube - YouTube iFrame Wrapper
================================================================================ */
_V_.youtube = _V_.PlaybackTech.extend({
init: function(player, options){
this.player = player;
var source = options.source;
// Extract the YouTube videoID from the source
var videoId = this.getVideoId(source.src);
// Which element to embed in
var parentEl = options.parentEl;
// Generate ID for iFrame
var objId = player.el.id+"_youtube_api";
// Create an iFrame for the YouTube player
var iFrm = this.el = _V_.createElement("iframe", {
id: objId + "_iframe",
name: objId + "_iframe",
className: "vjs-tech",
scrolling: "no",
marginWidth: 0,
marginHeight: 0,
frameBorder: 0,
webkitAllowFullScreen: "",
mozallowfullscreen: "",
allowFullScreen: ""
});
// Store a global list of currently loading players
_V_.youtube.loadingEls = _V_.youtube.loadingEls || [];
_V_.youtube.loadingEls.push(parentEl);
var playerOptions = player.options;
var optionsParams = options.params || {};
// Setup player parameters
var params = {
disablekb: 1,
enablejsapi: 1,
iv_load_policy: 3,
modestbranding: 1,
playerapiid: objId,
wmode: "opaque", // Opaque is needed to overlay controls, but can affect playback performance (Flash only)
rel: 0,
showinfo: 0,
showsearch: 0,
controls: this.toBoolInt(optionsParams.ytcontrols || playerOptions.ytcontrols),
autoplay: this.toBoolInt(optionsParams.autoplay || playerOptions.autoplay),
loop: this.toBoolInt(optionsParams.loop || playerOptions.loop),
hd: this.toBoolInt(optionsParams.hd || playerOptions.hd)
};
var p = (document.location.protocol == 'https:') ? 'https:' : 'http:';
if (document.domain != 'localhost' && document.location.protocol != 'file:')
params.origin = p + "//" + document.domain;
this.player.apiArgs = {
videoId: videoId,
playerVars: params,
events: {
"onReady": _V_.youtube.onReady,
"onStateChange": _V_.youtube.onStateChange,
"onPlaybackQualityChange": _V_.youtube.onPlaybackQualityChange,
"onError": _V_.youtube.onError
}
};
_V_.addEvent(parentEl, "techready", _V_.proxy(this, function(){
// YouTube JS API is ready, load the player
iFrm.src = p + "//www.youtube.com/embed/" + videoId + "?" +
this.makeQueryString(params);
// Initialize the YouTube Player object. Only pass events as arguments,
// since all of our other parameters went into the iFrame URL
this.youtube = new YT.Player(iFrm, { events: this.player.apiArgs.events });
}));
// Add iFrame to player div
_V_.insertFirst(iFrm, parentEl);
_V_.youtube.updateVideoQuality(this.player, null);
this.loadApi();
},
destroy: function(){
this.el.parentNode.removeChild(this.el);
this.youtube.destroy();
delete this.youtube;
},
play: function(){ this.youtube.playVideo(); },
pause: function(){ this.youtube.pauseVideo(); },
paused: function(){
var state = this.youtube.getPlayerState();
return state !== YT.PlayerState.PLAYING &&
state !== YT.PlayerState.BUFFERING;
},
src: function(src){
delete this.player.error;
// FIXME: Does this work or do we have to set the iFrame src again?
var videoId = this.getVideoId(src);
this.youtube.loadVideoById(videoId);
},
load: function(){ },
poster: function(){
var videoId = this.getVideoId(this.youtube.getVideoUrl());
return "http://img.youtube.com/vi/" + videoId + "/0.jpg";
},
currentTime: function(){ return this.youtube.getCurrentTime() || 0; },
setCurrentTime: function(seconds){
this.youtube.seekTo(seconds, true);
this.player.triggerEvent("timeupdate");
},
duration: function(){ return this.youtube.getDuration() || 0; },
buffered: function(){
var loadedBytes = this.youtube.getVideoBytesLoaded();
var totalBytes = this.youtube.getVideoBytesTotal();
if (!loadedBytes || !totalBytes) return 0;
var duration = this.youtube.getDuration();
var secondsBuffered = (loadedBytes / totalBytes) * duration;
var secondsOffset = (this.youtube.getVideoStartBytes() / totalBytes) * duration;
return _V_.createTimeRange(secondsOffset, secondsOffset + secondsBuffered);
},
volume: function(){
if (isNaN(this.youtube.volumeVal))
this.youtube.volumeVal = this.youtube.getVolume() / 100.0;
return this.youtube.volumeVal;
},
setVolume: function(percentAsDecimal){
if (percentAsDecimal != this.youtube.volumeVal) {
this.youtube.volumeVal = percentAsDecimal;
this.youtube.setVolume(percentAsDecimal * 100.0);
this.player.triggerEvent("volumechange");
}
},
muted: function(){ return this.youtube.isMuted(); },
setMuted: function(muted){
if (muted)
this.youtube.mute();
else
this.youtube.unMute();
// Volume changes do not show up in the API immediately, so we need
// to wait for a moment
var self = this;
setTimeout(function() { self.player.triggerEvent("volumechange"); }, 50);
},
width: function(){ return this.el.offsetWidth; },
height: function(){ return this.el.offsetHeight; },
currentSrc: function(){ return this.youtube.getVideoUrl(); },
preload: function(){ return false; },
setPreload: function(val){ },
autoplay: function(){ return !!this.player.apiArgs.playerVars.autoplay; },
setAutoplay: function(val){ },
loop: function(){ return !!this.player.apiArgs.playerVars.loop; },
setLoop: function(val){
this.player.apiArgs.playerVars.loop = (val ? 1 : 0);
// We handle looping manually
//this.youtube.setLoop(val);
},
supportsFullScreen: function(){ return false; },
enterFullScreen: function(){ return false; },
error: function(){ return this.player.error; },
seeking: function(){ return false; },
ended: function(){ return this.youtube.getPlayerState() === YT.PlayerState.ENDED; },
videoWidth: function(){ return this.player.videoWidth; },
videoHeight: function(){ return this.player.videoHeight; },
controls: function(){ return this.player.options.controls; },
defaultMuted: function(){ return false; },
// Helpers ------------------------------------------------------------------
makeQueryString: function(args) {
var array = [];
for (var key in args) {
if (args.hasOwnProperty(key))
array.push(encodeURIComponent(key) + "=" + encodeURIComponent(args[key]));
}
return array.join("&");
},
getVideoId: function(url) {
return url.match(/v=([^&]+)/)[1];
},
toBoolInt: function(val) {
return val ? 1 : 0;
},
loadApi: function() {
// Check if the YouTube JS API has already been loaded
var js, id = "youtube-jssdk", ref = document.getElementsByTagName("script")[0];
if (_V_.el(id)) {
window.onYouTubePlayerAPIReady();
return;
}
// Asynchronously load the YouTube JS API
var p = (document.location.protocol == "https:") ? "https:" : "http:";
js = _V_.createElement("script", { id: id, async: true, src: p + "//www.youtube.com/player_api" });
ref.parentNode.insertBefore(js, ref);
}
});
// Event callbacks ------------------------------------------------------------
_V_.youtube.onReady = function(e){
var player = e.target.getIframe().parentNode.player;
player.tech.triggerReady();
player.triggerReady();
player.triggerEvent("durationchange");
_V_.youtube.hideOverlay(player);
};
_V_.youtube.onStateChange = function(e){
var player = e.target.getIframe().parentNode.player;
// Suppress any duplicate events from YouTube
if (player.lastState === e.data)
return;
switch (e.data) {
case -1: // Unstarted
player.triggerEvent("durationchange");
break;
case YT.PlayerState.CUED:
break;
case YT.PlayerState.ENDED:
player.triggerEvent("ended");
_V_.youtube.hideOverlay(player);
// YouTube looping doesn't seem to play well with VideoJS, so we need to
// implement it manually here
if (player.apiArgs.playerVars.loop) {
player.tech.youtube.seekTo(0, true);
player.tech.youtube.playVideo();
} else {
player.tech.youtube.stopVideo();
}
break;
case YT.PlayerState.PLAYING:
player.triggerEvent("timeupdate");
player.triggerEvent("playing");
player.triggerEvent("play");
break;
case YT.PlayerState.PAUSED:
player.triggerEvent("pause");
break;
case YT.PlayerState.BUFFERING:
player.triggerEvent("timeupdate");
player.triggerEvent("waiting");
// Hide the waiting spinner since YouTube has its own
player.loadingSpinner.hide();
break;
}
player.lastState = e.data;
};
_V_.youtube.onPlaybackQualityChange = function(e){
var player = e.target.getIframe().parentNode.player;
_V_.youtube.updateVideoQuality(player, e.data);
player.triggerEvent("ratechange");
};
_V_.youtube.onError = function(e){
var player = e.target.getIframe().parentNode.player;
player.error = e.data;
player.triggerEvent("error");
};
// Helpers --------------------------------------------------------------------
_V_.youtube.hideOverlay = function(player) {
// Hide the big play button and poster since YouTube provides these. Using
// our own prevents the video from playing on the first click in mobile
// devices
player.bigPlayButton.hide();
player.posterImage.hide();
};
_V_.youtube.updateVideoQuality = function(player, quality) {
switch (quality) {
case 'medium':
player.videoWidth = 480;
player.videoHeight = 360;
break;
case 'large':
player.videoWidth = 640;
player.videoHeight = 480;
break;
case 'hd720':
player.videoWidth = 960;
player.videoHeight = 720;
break;
case 'hd1080':
player.videoWidth = 1440;
player.videoHeight = 1080;
break;
case 'highres':
player.videoWidth = 1920;
player.videoHeight = 1080;
break;
case 'small':
player.videoWidth = 320;
player.videoHeight = 240;
break;
default:
player.videoWidth = 0;
player.videoHeight = 0;
break;
}
};
// Support testing ------------------------------------------------------------
_V_.youtube.isSupported = function(){
return true;
};
_V_.youtube.canPlaySource = function(srcObj){
return srcObj.type == "video/youtube";
};
_V_.youtube.prototype.support = {
formats: {
"video/youtube": "YT"
},
// Optional events that we can manually mimic with timers
progressEvent: false,
timeupdateEvent: false,
//fullscreen: true,
// In iOS, if you move a video element in the DOM, it breaks video playback.
movingElementInDOM: !_V_.isIOS(),
fullscreenResize: true,
parentResize: true
};
// YouTube JS API load callback -----------------------------------------------
window.onYouTubePlayerAPIReady = function() {
// Fire a techready event for each loading player
var loadingEl;
while ((loadingEl = _V_.youtube.loadingEls.shift())) {
loadingEl.player.triggerEvent("techready");
}
};
var VimeoState = {
UNSTARTED: -1,
ENDED: 0,
PLAYING: 1,
PAUSED: 2,
BUFFERING: 3
};
/* VideoJS-Vimeo - Vimeo iFrame Wrapper
================================================================================ */
_V_.vimeo = _V_.PlaybackTech.extend({
init: function(player, options){
this.player = player;
var source = options.source;
// Extract the Vimeo videoID from the source
var videoId = this.getVideoId(source.src);
// Which element to embed in
var parentEl = options.parentEl;
// Generate ID for iFrame
var objId = player.el.id+"_vimeo_api";
// Create an iFrame for the Vimeo player
var iFrm = this.el = _V_.createElement("iframe", {
id: objId + "_iframe",
name: objId + "_iframe",
className: "vjs-tech",
scrolling: "no",
marginWidth: 0,
marginHeight: 0,
frameBorder: 0,
webkitAllowFullScreen: "",
mozallowfullscreen: "",
allowFullScreen: ""
});
var playerOptions = player.options;
var optionsParams = options.params || {};
// Setup player parameters
this.player.apiArgs = {
api: 1,
byline: 0,
portrait: 0,
show_title: 0,
show_byline: 0,
show_portrait: 0,
fullscreen: 1,
player_id: objId + "_iframe",
color: optionsParams.color || playerOptions.color || 'ffffff',
autoplay: this.toBoolInt(optionsParams.autoplay || playerOptions.autoplay),
loop: this.toBoolInt(optionsParams.loop || playerOptions.loop)
};
// Create a dummy object to hold Vimeo state in case any info is requested
// before the iFrame loads
this.player.vimeoInfo = {};
// Add iFrame to player div
_V_.insertFirst(iFrm, parentEl);
this.loadPlayer(videoId);
},
loadPlayer: function(videoId){
var baseUrl = (document.location.protocol == 'https:') ?
'https://secure.vimeo.com/video/' :
'http://player.vimeo.com/video/';
// Wait until iFrame has loaded to initialize the API
_V_.addEvent(this.el, "load", _V_.proxy(this, function(){
// Initialize the Vimeo Player object
this.vimeo = $f(this.el);
// Create an object to track the state of the Vimeo player, since we can
// only fetch information from the iFrame asynchronously
this.player.vimeoInfo = {
state: VimeoState.UNSTARTED,
volume: 1,
muted: false,
muteVolume: 1,
time: 0,
duration: 0,
buffered: 0,
url: baseUrl + videoId,
error: null
};
// Register Vimeo event handlers
this.vimeo.addEvent('ready', _V_.vimeo.onReady);
this.vimeo.addEvent('loadProgress', _V_.vimeo.onLoadProgress);
this.vimeo.addEvent('playProgress', _V_.vimeo.onPlayProgress);
this.vimeo.addEvent('play', _V_.vimeo.onPlay);
this.vimeo.addEvent('pause', _V_.vimeo.onPause);
this.vimeo.addEvent('finish', _V_.vimeo.onFinish);
this.vimeo.addEvent('seek', _V_.vimeo.onSeek);
}));
// Set the iFrame URL to start loading the video
this.el.src = baseUrl + videoId + "?" + this.makeQueryString(this.player.apiArgs);
},
destroy: function(){
this.vimeo.api("unload");
delete this.vimeo;
this.el.parentNode.removeChild(this.el);
},
play: function(){ this.vimeo.api("play"); },
pause: function(){ this.vimeo.api("pause"); },
paused: function(){
var state = this.player.vimeoInfo.state;
return state !== VimeoState.PLAYING &&
state !== VimeoState.BUFFERING;
},
src: function(src){
var videoId = this.getVideoId(src);
this.loadPlayer(videoId);
},
load: function(){ },
poster: function(){
// We could fetch the poster image using JSONP, but it would need to be
// done ahead of time (and probably enabled only through a player param)
return null;
},
currentTime: function(){ return this.player.vimeoInfo.time || 0; },
setCurrentTime: function(seconds){ this.vimeo.api("seekTo", seconds); },
duration: function(){ return this.player.vimeoInfo.duration || 0; },
buffered: function(){
return _V_.createTimeRange(0, this.player.vimeoInfo.buffered || 0);
},
volume: function(){
return (this.player.vimeoInfo.muted) ?
this.player.vimeoInfo.muteVolume :
this.player.vimeoInfo.volume;
},
setVolume: function(percentAsDecimal){
this.vimeo.api("setVolume", percentAsDecimal);
this.player.vimeoInfo.volume = percentAsDecimal;
this.player.triggerEvent("volumechange");
},
muted: function(){ return this.player.vimeoInfo.muted || false; },
setMuted: function(muted){
if (muted) {
this.player.vimeoInfo.muteVolume = this.player.vimeoInfo.volume;
this.setVolume(0);
} else {
this.setVolume(this.player.vimeoInfo.muteVolume);
}
this.player.vimeoInfo.muted = muted;
this.player.triggerEvent("volumechange");
},
width: function(){ return this.el.offsetWidth; },
height: function(){ return this.el.offsetHeight; },
currentSrc: function(){ return this.player.vimeoInfo.url; },
preload: function(){ return false; },
setPreload: function(val){ },
autoplay: function(){ return !!this.player.apiArgs.autoplay; },
setAutoplay: function(val){ },
loop: function(){ return !!this.player.apiArgs.loop; },
setLoop: function(val){
this.player.apiArgs.loop = (val ? 1 : 0);
// We handle looping manually
//this.vimeo.api("setLoop", val);
},
supportsFullScreen: function(){ return false; },
enterFullScreen: function(){ return false; },
error: function(){ return this.player.vimeoInfo.error; },
seeking: function(){ return false; },
ended: function(){ return this.player.vimeoInfo.state === VimeoState.ENDED; },
videoWidth: function(){ return this.width(); },
videoHeight: function(){ return this.height(); },
controls: function(){ return this.player.options.controls; },
defaultMuted: function(){ return false; },
// Helpers ------------------------------------------------------------------
makeQueryString: function(args) {
var array = [];
for (var key in args) {
if (args.hasOwnProperty(key))
array.push(encodeURIComponent(key) + "=" + encodeURIComponent(args[key]));
}
return array.join("&");
},
getVideoId: function(url) {
return url.match(/vimeo\.com\/(?:.*#|.*\/videos\/)?([0-9]+)/)[1];
},
toBoolInt: function(val) {
return val ? 1 : 0;
}
});
// Event callbacks ------------------------------------------------------------
_V_.vimeo.onReady = function(id) {
var player = _V_.el(id).parentNode.player;
player.tech.triggerReady();
player.triggerReady();
player.triggerEvent("canplay");
_V_.vimeo.hideOverlay(player);
// Hide our playback controls since we have no good way of hiding the Vimeo
// controls
player.controlBar.hide();
};
_V_.vimeo.onLoadProgress = function(data, id) {
var player = _V_.el(id).parentNode.player;
var durationUpdate = !player.vimeoInfo.duration;
player.vimeoInfo.duration = data.duration;
player.vimeoInfo.buffered = data.percent;
player.triggerEvent("progress");
if (durationUpdate) player.triggerEvent("durationchange");
};
_V_.vimeo.onPlayProgress = function(data, id) {
var player = _V_.el(id).parentNode.player;
player.vimeoInfo.time = data.seconds;
player.triggerEvent("timeupdate");
};
_V_.vimeo.onPlay = function(id) {
var player = _V_.el(id).parentNode.player;
player.vimeoInfo.state = VimeoState.PLAYING;
player.triggerEvent("play");
};
_V_.vimeo.onPause = function(id) {
var player = _V_.el(id).parentNode.player;
player.vimeoInfo.state = VimeoState.PAUSED;
player.triggerEvent("pause");
};
_V_.vimeo.onFinish = function(id) {
var player = _V_.el(id).parentNode.player;
player.vimeoInfo.state = VimeoState.ENDED;
player.triggerEvent("ended");
_V_.vimeo.hideOverlay(player);
// Vimeo looping doesn't seem to play well with VideoJS, so we need to
// implement it manually here
if (player.apiArgs.loop) {
//player.tech.vimeo.api("seekTo", 0);
player.tech.vimeo.api("play");
} else {
// Reset the video
player.tech.vimeo.api("seekTo", 0);
player.tech.vimeo.api("play");
player.tech.vimeo.api("pause");
}
};
_V_.vimeo.onSeek = function(data, id) {
var player = _V_.el(id).parentNode.player;
player.vimeoInfo.time = data.seconds;
player.triggerEvent("timeupdate");
player.triggerEvent("seeked");
};
// Helpers --------------------------------------------------------------------
_V_.vimeo.hideOverlay = function(player) {
// Hide the big play button and poster since Vimeo provides these. Using
// our own prevents the video from playing on the first click in mobile
// devices
player.bigPlayButton.hide();
player.posterImage.hide();
};
// Support testing ------------------------------------------------------------
_V_.vimeo.isSupported = function(){
return true;
};
_V_.vimeo.canPlaySource = function(srcObj){
return srcObj.type == "video/vimeo";
};
_V_.vimeo.prototype.support = {
formats: {
"video/vimeo": "VIM"
},
// Optional events that we can manually mimic with timers
progressEvent: true,
timeupdateEvent: true,
//fullscreen: true,
// In iOS, if you move a video element in the DOM, it breaks video playback.
movingElementInDOM: !_V_.isIOS(),
fullscreenResize: true,
parentResize: true
};
// Froogaloop API -------------------------------------------------------------
// From https://github.com/vimeo/player-api/blob/master/javascript/froogaloop.js
var Froogaloop = (function(){
// Define a local copy of Froogaloop
function Froogaloop(iframe) {
// The Froogaloop object is actually just the init constructor
return new Froogaloop.fn.init(iframe);
}
var eventCallbacks = {},
hasWindowEvent = false,
isReady = false,
slice = Array.prototype.slice,
playerDomain = '';
Froogaloop.fn = Froogaloop.prototype = {
element: null,
init: function(iframe) {
if (typeof iframe === "string") {
iframe = document.getElementById(iframe);
}
this.element = iframe;
// Register message event listeners
playerDomain = getDomainFromUrl(this.element.getAttribute('src'));
return this;
},
/*
* Calls a function to act upon the player.
*
* @param {string} method The name of the Javascript API method to call. Eg: 'play'.
* @param {Array|Function} valueOrCallback params Array of parameters to pass when calling an API method
* or callback function when the method returns a value.
*/
api: function(method, valueOrCallback) {
if (!this.element || !method) {
return false;
}
var self = this,
element = self.element,
target_id = element.id !== '' ? element.id : null,
params = !isFunction(valueOrCallback) ? valueOrCallback : null,
callback = isFunction(valueOrCallback) ? valueOrCallback : null;
// Store the callback for get functions
if (callback) {
storeCallback(method, callback, target_id);
}
postMessage(method, params, element);
return self;
},
/*
* Registers an event listener and a callback function that gets called when the event fires.
*
* @param eventName (String): Name of the event to listen for.
* @param callback (Function): Function that should be called when the event fires.
*/
addEvent: function(eventName, callback) {
if (!this.element) {
return false;
}
var self = this,
element = self.element,
target_id = element.id !== '' ? element.id : null;
storeCallback(eventName, callback, target_id);
// The ready event is not registered via postMessage. It fires regardless.
if (eventName != 'ready') {
postMessage('addEventListener', eventName, element);
}
else if (eventName == 'ready' && isReady) {
callback.call(null, target_id);
}
return self;
},
/*
* Unregisters an event listener that gets called when the event fires.
*
* @param eventName (String): Name of the event to stop listening for.
*/
removeEvent: function(eventName) {
if (!this.element) {
return false;
}
var self = this,
element = self.element,
target_id = element.id !== '' ? element.id : null,
removed = removeCallback(eventName, target_id);
// The ready event is not registered
if (eventName != 'ready' && removed) {
postMessage('removeEventListener', eventName, element);
}
}
};
/**
* Handles posting a message to the parent window.
*
* @param method (String): name of the method to call inside the player. For api calls
* this is the name of the api method (api_play or api_pause) while for events this method
* is api_addEventListener.
* @param params (Object or Array): List of parameters to submit to the method. Can be either
* a single param or an array list of parameters.
* @param target (HTMLElement): Target iframe to post the message to.
*/
function postMessage(method, params, target) {
if (!target.contentWindow.postMessage) {
return false;
}
var url = target.getAttribute('src').split('?')[0],
data = JSON.stringify({
method: method,
value: params
});
if (url.substr(0, 2) === '//') {
url = window.location.protocol + url;
}
target.contentWindow.postMessage(data, url);
}
/**
* Event that fires whenever the window receives a message from its parent
* via window.postMessage.
*/
function onMessageReceived(event) {
var data, method;
try {
data = JSON.parse(event.data);
method = data.event || data.method;
}
catch(e) {
//fail silently... like a ninja!
}
if (method == 'ready' && !isReady) {
isReady = true;
}
// Handles messages from moogaloop only
if (event.origin != playerDomain) {
return false;
}
var value = data.value,
eventData = data.data,
target_id = target_id === '' ? null : data.player_id,
callback = getCallback(method, target_id),
params = [];
if (!callback) {
return false;
}
if (value !== undefined) {
params.push(value);
}
if (eventData) {
params.push(eventData);
}
if (target_id) {
params.push(target_id);
}
return params.length > 0 ? callback.apply(null, params) : callback.call();
}
/**
* Stores submitted callbacks for each iframe being tracked and each
* event for that iframe.
*
* @param eventName (String): Name of the event. Eg. api_onPlay
* @param callback (Function): Function that should get executed when the
* event is fired.
* @param target_id (String) [Optional]: If handling more than one iframe then
* it stores the different callbacks for different iframes based on the iframe's
* id.
*/
function storeCallback(eventName, callback, target_id) {
if (target_id) {
if (!eventCallbacks[target_id]) {
eventCallbacks[target_id] = {};
}
eventCallbacks[target_id][eventName] = callback;
}
else {
eventCallbacks[eventName] = callback;
}
}
/**
* Retrieves stored callbacks.
*/
function getCallback(eventName, target_id) {
if (target_id) {
return eventCallbacks[target_id][eventName];
}
else {
return eventCallbacks[eventName];
}
}
function removeCallback(eventName, target_id) {
if (target_id && eventCallbacks[target_id]) {
if (!eventCallbacks[target_id][eventName]) {
return false;
}
eventCallbacks[target_id][eventName] = null;
}
else {
if (!eventCallbacks[eventName]) {
return false;
}
eventCallbacks[eventName] = null;
}
return true;
}
/**
* Returns a domain's root domain.
* Eg. returns http://vimeo.com when http://vimeo.com/channels is sbumitted
*
* @param url (String): Url to test against.
* @return url (String): Root domain of submitted url
*/
function getDomainFromUrl(url) {
if (url.substr(0, 2) === '//') {
url = window.location.protocol + url;
}
var url_pieces = url.split('/'),
domain_str = '';
for(var i = 0, length = url_pieces.length; i < length; i++) {
if(i<3) {domain_str += url_pieces[i];}
else {break;}
if(i<2) {domain_str += '/';}
}
return domain_str;
}
function isFunction(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
}
function isArray(obj) {
return toString.call(obj) === '[object Array]';
}
// Give the init function the Froogaloop prototype for later instantiation
Froogaloop.fn.init.prototype = Froogaloop.fn;
// Listens for the message event.
// W3C
if (window.addEventListener) {
window.addEventListener('message', onMessageReceived, false);
}
// IE
else {
window.attachEvent('onmessage', onMessageReceived);
}
// Expose froogaloop to the global object
return (window.Froogaloop = window.$f = Froogaloop);
})();
/* Control - Base class for all control elements
================================================================================ */
_V_.Control = _V_.Component.extend({
buildCSSClass: function(){
return "vjs-control " + this._super();
}
});
/* Control Bar
================================================================================ */
_V_.ControlBar = _V_.Component.extend({
options: {
loadEvent: "play",
components: {
"playToggle": {},
"fullscreenToggle": {},
"currentTimeDisplay": {},
"timeDivider": {},
"durationDisplay": {},
"remainingTimeDisplay": {},
"progressControl": {},
"volumeControl": {},
"muteToggle": {}
}
},
init: function(player, options){
this._super(player, options);
player.one("play", this.proxy(function(){
this.fadeIn();
this.player.on("mouseover", this.proxy(this.fadeIn));
this.player.on("mouseout", this.proxy(this.fadeOut));
}));
},
createElement: function(){
return _V_.createElement("div", {
className: "vjs-controls"
});
},
fadeIn: function(){
this._super();
this.player.trigger("controlsvisible");
},
fadeOut: function(){
this._super();
this.player.trigger("controlshidden");
},
lockShowing: function(){
this.el.style.opacity = "1";
}
});
/* Button - Base class for all buttons
================================================================================ */
_V_.Button = _V_.Control.extend({
init: function(player, options){
this._super(player, options);
this.on("click", this.onClick);
this.on("focus", this.onFocus);
this.on("blur", this.onBlur);
},
createElement: function(type, attrs){
// Add standard Aria and Tabindex info
attrs = _V_.merge({
className: this.buildCSSClass(),
innerHTML: '
' + (this.buttonText || "Need Text") + '
',
role: "button",
tabIndex: 0
}, attrs);
return this._super(type, attrs);
},
// Click - Override with specific functionality for button
onClick: function(){},
// Focus - Add keyboard functionality to element
onFocus: function(){
_V_.on(document, "keyup", _V_.proxy(this, this.onKeyPress));
},
// KeyPress (document level) - Trigger click when keys are pressed
onKeyPress: function(event){
// Check for space bar (32) or enter (13) keys
if (event.which == 32 || event.which == 13) {
event.preventDefault();
this.onClick();
}
},
// Blur - Remove keyboard triggers
onBlur: function(){
_V_.off(document, "keyup", _V_.proxy(this, this.onKeyPress));
}
});
/* Play Button
================================================================================ */
_V_.PlayButton = _V_.Button.extend({
buttonText: "Play",
buildCSSClass: function(){
return "vjs-play-button " + this._super();
},
onClick: function(){
this.player.play();
}
});
/* Pause Button
================================================================================ */
_V_.PauseButton = _V_.Button.extend({
buttonText: "Pause",
buildCSSClass: function(){
return "vjs-pause-button " + this._super();
},
onClick: function(){
this.player.pause();
}
});
/* Play Toggle - Play or Pause Media
================================================================================ */
_V_.PlayToggle = _V_.Button.extend({
buttonText: "Play",
init: function(player, options){
this._super(player, options);
player.on("play", _V_.proxy(this, this.onPlay));
player.on("pause", _V_.proxy(this, this.onPause));
},
buildCSSClass: function(){
return "vjs-play-control " + this._super();
},
// OnClick - Toggle between play and pause
onClick: function(){
if (this.player.paused()) {
this.player.play();
} else {
this.player.pause();
}
},
// OnPlay - Add the vjs-playing class to the element so it can change appearance
onPlay: function(){
_V_.removeClass(this.el, "vjs-paused");
_V_.addClass(this.el, "vjs-playing");
},
// OnPause - Add the vjs-paused class to the element so it can change appearance
onPause: function(){
_V_.removeClass(this.el, "vjs-playing");
_V_.addClass(this.el, "vjs-paused");
}
});
/* Fullscreen Toggle Behaviors
================================================================================ */
_V_.FullscreenToggle = _V_.Button.extend({
buttonText: "Fullscreen",
buildCSSClass: function(){
return "vjs-fullscreen-control " + this._super();
},
onClick: function(){
if (!this.player.isFullScreen) {
this.player.requestFullScreen();
} else {
this.player.cancelFullScreen();
}
}
});
/* Big Play Button
================================================================================ */
_V_.BigPlayButton = _V_.Button.extend({
init: function(player, options){
this._super(player, options);
player.on("play", _V_.proxy(this, this.hide));
player.on("ended", _V_.proxy(this, this.show));
},
createElement: function(){
return this._super("div", {
className: "vjs-big-play-button",
innerHTML: ""
});
},
onClick: function(){
// Go back to the beginning if big play button is showing at the end.
// Have to check for current time otherwise it might throw a 'not ready' error.
if(this.player.currentTime()) {
this.player.currentTime(0);
}
this.player.play();
}
});
/* Loading Spinner
================================================================================ */
_V_.LoadingSpinner = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
player.on("canplay", _V_.proxy(this, this.hide));
player.on("canplaythrough", _V_.proxy(this, this.hide));
player.on("playing", _V_.proxy(this, this.hide));
player.on("seeked", _V_.proxy(this, this.hide));
player.on("seeking", _V_.proxy(this, this.show));
player.on("error", _V_.proxy(this, this.show));
// Not showing spinner on stalled any more. Browsers may stall and then not trigger any events that would remove the spinner.
// Checked in Chrome 16 and Safari 5.1.2. http://help.videojs.com/discussions/problems/883-why-is-the-download-progress-showing
// player.on("stalled", _V_.proxy(this, this.show));
player.on("waiting", _V_.proxy(this, this.show));
},
createElement: function(){
var classNameSpinner, innerHtmlSpinner;
if ( typeof this.player.el.style.WebkitBorderRadius == "string"
|| typeof this.player.el.style.MozBorderRadius == "string"
|| typeof this.player.el.style.KhtmlBorderRadius == "string"
|| typeof this.player.el.style.borderRadius == "string")
{
classNameSpinner = "vjs-loading-spinner";
innerHtmlSpinner = "";
} else {
classNameSpinner = "vjs-loading-spinner-fallback";
innerHtmlSpinner = "";
}
return this._super("div", {
className: classNameSpinner,
innerHTML: innerHtmlSpinner
});
}
});
/* Time
================================================================================ */
_V_.CurrentTimeDisplay = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
player.on("timeupdate", _V_.proxy(this, this.updateContent));
},
createElement: function(){
var el = this._super("div", {
className: "vjs-current-time vjs-time-controls vjs-control"
});
this.content = _V_.createElement("div", {
className: "vjs-current-time-display",
innerHTML: '0:00'
});
el.appendChild(_V_.createElement("div").appendChild(this.content));
return el;
},
updateContent: function(){
// Allows for smooth scrubbing, when player can't keep up.
var time = (this.player.scrubbing) ? this.player.values.currentTime : this.player.currentTime();
this.content.innerHTML = _V_.formatTime(time, this.player.duration());
}
});
_V_.DurationDisplay = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
player.on("timeupdate", _V_.proxy(this, this.updateContent));
},
createElement: function(){
var el = this._super("div", {
className: "vjs-duration vjs-time-controls vjs-control"
});
this.content = _V_.createElement("div", {
className: "vjs-duration-display",
innerHTML: '0:00'
});
el.appendChild(_V_.createElement("div").appendChild(this.content));
return el;
},
updateContent: function(){
if (this.player.duration()) { this.content.innerHTML = _V_.formatTime(this.player.duration()); }
}
});
// Time Separator (Not used in main skin, but still available, and could be used as a 'spare element')
_V_.TimeDivider = _V_.Component.extend({
createElement: function(){
return this._super("div", {
className: "vjs-time-divider",
innerHTML: '
/
'
});
}
});
_V_.RemainingTimeDisplay = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
player.on("timeupdate", _V_.proxy(this, this.updateContent));
},
createElement: function(){
var el = this._super("div", {
className: "vjs-remaining-time vjs-time-controls vjs-control"
});
this.content = _V_.createElement("div", {
className: "vjs-remaining-time-display",
innerHTML: '-0:00'
});
el.appendChild(_V_.createElement("div").appendChild(this.content));
return el;
},
updateContent: function(){
if (this.player.duration()) { this.content.innerHTML = "-"+_V_.formatTime(this.player.remainingTime()); }
// Allows for smooth scrubbing, when player can't keep up.
// var time = (this.player.scrubbing) ? this.player.values.currentTime : this.player.currentTime();
// this.content.innerHTML = _V_.formatTime(time, this.player.duration());
}
});
/* Slider - Parent for seek bar and volume slider
================================================================================ */
_V_.Slider = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
player.on(this.playerEvent, _V_.proxy(this, this.update));
this.on("mousedown", this.onMouseDown);
this.on("focus", this.onFocus);
this.on("blur", this.onBlur);
this.player.on("controlsvisible", this.proxy(this.update));
// This is actually to fix the volume handle position. http://twitter.com/#!/gerritvanaaken/status/159046254519787520
// this.player.one("timeupdate", this.proxy(this.update));
this.update();
},
createElement: function(type, attrs) {
attrs = _V_.merge({
role: "slider",
"aria-valuenow": 0,
"aria-valuemin": 0,
"aria-valuemax": 100,
tabIndex: 0
}, attrs);
return this._super(type, attrs);
},
onMouseDown: function(event){
event.preventDefault();
_V_.blockTextSelection();
_V_.on(document, "mousemove", _V_.proxy(this, this.onMouseMove));
_V_.on(document, "mouseup", _V_.proxy(this, this.onMouseUp));
this.onMouseMove(event);
},
onMouseUp: function(event) {
_V_.unblockTextSelection();
_V_.off(document, "mousemove", this.onMouseMove, false);
_V_.off(document, "mouseup", this.onMouseUp, false);
this.update();
},
update: function(){
// If scrubbing, we could use a cached value to make the handle keep up with the user's mouse.
// On HTML5 browsers scrubbing is really smooth, but some flash players are slow, so we might want to utilize this later.
// var progress = (this.player.scrubbing) ? this.player.values.currentTime / this.player.duration() : this.player.currentTime() / this.player.duration();
var barProgress,
progress = this.getPercent();
handle = this.handle,
bar = this.bar;
// Protect against no duration and other division issues
if (isNaN(progress)) { progress = 0; }
barProgress = progress;
// If there is a handle, we need to account for the handle in our calculation for progress bar
// so that it doesn't fall short of or extend past the handle.
if (handle) {
var box = this.el,
boxWidth = box.offsetWidth,
handleWidth = handle.el.offsetWidth,
// The width of the handle in percent of the containing box
// In IE, widths may not be ready yet causing NaN
handlePercent = (handleWidth) ? handleWidth / boxWidth : 0,
// Get the adjusted size of the box, considering that the handle's center never touches the left or right side.
// There is a margin of half the handle's width on both sides.
boxAdjustedPercent = 1 - handlePercent;
// Adjust the progress that we'll use to set widths to the new adjusted box width
adjustedProgress = progress * boxAdjustedPercent,
// The bar does reach the left side, so we need to account for this in the bar's width
barProgress = adjustedProgress + (handlePercent / 2);
// Move the handle from the left based on the adjected progress
handle.el.style.left = _V_.round(adjustedProgress * 100, 2) + "%";
}
// Set the new bar width
bar.el.style.width = _V_.round(barProgress * 100, 2) + "%";
},
calculateDistance: function(event){
var box = this.el,
boxX = _V_.findPosX(box),
boxW = box.offsetWidth,
handle = this.handle;
if (handle) {
var handleW = handle.el.offsetWidth;
// Adjusted X and Width, so handle doesn't go outside the bar
boxX = boxX + (handleW / 2);
boxW = boxW - handleW;
}
// Percent that the click is through the adjusted area
return Math.max(0, Math.min(1, (event.pageX - boxX) / boxW));
},
onFocus: function(event){
_V_.on(document, "keyup", _V_.proxy(this, this.onKeyPress));
},
onKeyPress: function(event){
if (event.which == 37) { // Left Arrow
event.preventDefault();
this.stepBack();
} else if (event.which == 39) { // Right Arrow
event.preventDefault();
this.stepForward();
}
},
onBlur: function(event){
_V_.off(document, "keyup", _V_.proxy(this, this.onKeyPress));
}
});
/* Progress
================================================================================ */
// Progress Control: Seek, Load Progress, and Play Progress
_V_.ProgressControl = _V_.Component.extend({
options: {
components: {
"seekBar": {}
}
},
createElement: function(){
return this._super("div", {
className: "vjs-progress-control vjs-control"
});
}
});
// Seek Bar and holder for the progress bars
_V_.SeekBar = _V_.Slider.extend({
options: {
components: {
"loadProgressBar": {},
// Set property names to bar and handle to match with the parent Slider class is looking for
"bar": { componentClass: "PlayProgressBar" },
"handle": { componentClass: "SeekHandle" }
}
},
playerEvent: "timeupdate",
init: function(player, options){
this._super(player, options);
},
createElement: function(){
return this._super("div", {
className: "vjs-progress-holder"
});
},
getPercent: function(){
return this.player.currentTime() / this.player.duration();
},
onMouseDown: function(event){
this._super(event);
this.player.scrubbing = true;
this.videoWasPlaying = !this.player.paused();
this.player.pause();
},
onMouseMove: function(event){
var newTime = this.calculateDistance(event) * this.player.duration();
// Don't let video end while scrubbing.
if (newTime == this.player.duration()) { newTime = newTime - 0.1; }
// Set new time (tell player to seek to new time)
this.player.currentTime(newTime);
},
onMouseUp: function(event){
this._super(event);
this.player.scrubbing = false;
if (this.videoWasPlaying) {
this.player.play();
}
},
stepForward: function(){
this.player.currentTime(this.player.currentTime() + 1);
},
stepBack: function(){
this.player.currentTime(this.player.currentTime() - 1);
}
});
// Load Progress Bar
_V_.LoadProgressBar = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
player.on("progress", _V_.proxy(this, this.update));
},
createElement: function(){
return this._super("div", {
className: "vjs-load-progress",
innerHTML: 'Loaded: 0%'
});
},
update: function(){
if (this.el.style) { this.el.style.width = _V_.round(this.player.bufferedPercent() * 100, 2) + "%"; }
}
});
// Play Progress Bar
_V_.PlayProgressBar = _V_.Component.extend({
createElement: function(){
return this._super("div", {
className: "vjs-play-progress",
innerHTML: 'Progress: 0%'
});
}
});
// Seek Handle
// SeekBar Behavior includes play progress bar, and seek handle
// Needed so it can determine seek position based on handle position/size
_V_.SeekHandle = _V_.Component.extend({
createElement: function(){
return this._super("div", {
className: "vjs-seek-handle",
innerHTML: '00:00'
});
}
});
/* Volume Scrubber
================================================================================ */
// Progress Control: Seek, Load Progress, and Play Progress
_V_.VolumeControl = _V_.Component.extend({
options: {
components: {
"volumeBar": {}
}
},
createElement: function(){
return this._super("div", {
className: "vjs-volume-control vjs-control"
});
}
});
_V_.VolumeBar = _V_.Slider.extend({
options: {
components: {
"bar": { componentClass: "VolumeLevel" },
"handle": { componentClass: "VolumeHandle" }
}
},
playerEvent: "volumechange",
createElement: function(){
return this._super("div", {
className: "vjs-volume-bar"
});
},
onMouseMove: function(event) {
this.player.volume(this.calculateDistance(event));
},
getPercent: function(){
return this.player.volume();
},
stepForward: function(){
this.player.volume(this.player.volume() + 0.1);
},
stepBack: function(){
this.player.volume(this.player.volume() - 0.1);
}
});
_V_.VolumeLevel = _V_.Component.extend({
createElement: function(){
return this._super("div", {
className: "vjs-volume-level",
innerHTML: ''
});
}
});
_V_.VolumeHandle = _V_.Component.extend({
createElement: function(){
return this._super("div", {
className: "vjs-volume-handle",
innerHTML: ''
// tabindex: 0,
// role: "slider", "aria-valuenow": 0, "aria-valuemin": 0, "aria-valuemax": 100
});
}
});
_V_.MuteToggle = _V_.Button.extend({
init: function(player, options){
this._super(player, options);
player.on("volumechange", _V_.proxy(this, this.update));
},
createElement: function(){
return this._super("div", {
className: "vjs-mute-control vjs-control",
innerHTML: '
Mute
'
});
},
onClick: function(event){
this.player.muted( this.player.muted() ? false : true );
},
update: function(event){
var vol = this.player.volume(),
level = 3;
if (vol == 0 || this.player.muted()) {
level = 0;
} else if (vol < 0.33) {
level = 1;
} else if (vol < 0.67) {
level = 2;
}
/* TODO improve muted icon classes */
_V_.each.call(this, [0,1,2,3], function(i){
_V_.removeClass(this.el, "vjs-vol-"+i);
});
_V_.addClass(this.el, "vjs-vol-"+level);
}
});
/* Poster Image
================================================================================ */
_V_.PosterImage = _V_.Button.extend({
init: function(player, options){
this._super(player, options);
if (!this.player.options.poster) {
this.hide();
}
player.on("play", _V_.proxy(this, this.hide));
},
createElement: function(){
return _V_.createElement("img", {
className: "vjs-poster",
src: this.player.options.poster,
// Don't want poster to be tabbable.
tabIndex: -1
});
},
onClick: function(){
this.player.play();
}
});
/* Menu
================================================================================ */
// The base for text track and settings menu buttons.
_V_.Menu = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
},
addItem: function(component){
this.addComponent(component);
component.on("click", this.proxy(function(){
this.unlockShowing();
}));
},
createElement: function(){
return this._super("ul", {
className: "vjs-menu"
});
}
});
_V_.MenuItem = _V_.Button.extend({
init: function(player, options){
this._super(player, options);
if (options.selected) {
this.addClass("vjs-selected");
}
},
createElement: function(type, attrs){
return this._super("li", _V_.merge({
className: "vjs-menu-item",
innerHTML: this.options.label
}, attrs));
},
onClick: function(){
this.selected(true);
},
selected: function(selected){
if (selected) {
this.addClass("vjs-selected");
} else {
this.removeClass("vjs-selected")
}
}
});// TEXT TRACKS
// Text tracks are tracks of timed text events.
// Captions - text displayed over the video for the hearing impared
// Subtitles - text displayed over the video for those who don't understand langauge in the video
// Chapters - text displayed in a menu allowing the user to jump to particular points (chapters) in the video
// Descriptions (not supported yet) - audio descriptions that are read back to the user by a screen reading device
// Player Track Functions - Functions add to the player object for easier access to tracks
_V_.merge(_V_.Player.prototype, {
// Add an array of text tracks. captions, subtitles, chapters, descriptions
// Track objects will be stored in the player.textTracks array
addTextTracks: function(trackObjects){
var tracks = this.textTracks = (this.textTracks) ? this.textTracks : [],
i = 0, j = trackObjects.length, track, Kind;
for (;i 0) {
track.disable();
}
}
// Get track kind from shown track or disableSameKind
kind = (showTrack) ? showTrack.kind : ((disableSameKind) ? disableSameKind : false);
// Trigger trackchange event, captionstrackchange, subtitlestrackchange, etc.
if (kind) {
this.trigger(kind+"trackchange");
}
return this;
}
});
// Track Class
// Contains track methods for loading, showing, parsing cues of tracks
_V_.Track = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
// Apply track info to track object
// Options will often be a track element
_V_.merge(this, {
// Build ID if one doesn't exist
id: options.id || ("vjs_" + options.kind + "_" + options.language + "_" + _V_.guid++),
src: options.src,
// If default is used, subtitles/captions to start showing
"default": options["default"], // 'default' is reserved-ish
title: options.title,
// Language - two letter string to represent track language, e.g. "en" for English
// readonly attribute DOMString language;
language: options.srclang,
// Track label e.g. "English"
// readonly attribute DOMString label;
label: options.label,
// All cues of the track. Cues have a startTime, endTime, text, and other properties.
// readonly attribute TextTrackCueList cues;
cues: [],
// ActiveCues is all cues that are currently showing
// readonly attribute TextTrackCueList activeCues;
activeCues: [],
// ReadyState describes if the text file has been loaded
// const unsigned short NONE = 0;
// const unsigned short LOADING = 1;
// const unsigned short LOADED = 2;
// const unsigned short ERROR = 3;
// readonly attribute unsigned short readyState;
readyState: 0,
// Mode describes if the track is showing, hidden, or disabled
// const unsigned short OFF = 0;
// const unsigned short HIDDEN = 1; (still triggering cuechange events, but not visible)
// const unsigned short SHOWING = 2;
// attribute unsigned short mode;
mode: 0
});
},
// Create basic div to hold cue text
createElement: function(){
return this._super("div", {
className: "vjs-" + this.kind + " vjs-text-track"
});
},
// Show: Mode Showing (2)
// Indicates that the text track is active. If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily.
// The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
// In addition, for text tracks whose kind is subtitles or captions, the cues are being displayed over the video as appropriate;
// for text tracks whose kind is descriptions, the user agent is making the cues available to the user in a non-visual fashion;
// and for text tracks whose kind is chapters, the user agent is making available to the user a mechanism by which the user can navigate to any point in the media resource by selecting a cue.
// The showing by default state is used in conjunction with the default attribute on track elements to indicate that the text track was enabled due to that attribute.
// This allows the user agent to override the state if a later track is discovered that is more appropriate per the user's preferences.
show: function(){
this.activate();
this.mode = 2;
// Show element.
this._super();
},
// Hide: Mode Hidden (1)
// Indicates that the text track is active, but that the user agent is not actively displaying the cues.
// If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily.
// The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
hide: function(){
// When hidden, cues are still triggered. Disable to stop triggering.
this.activate();
this.mode = 1;
// Hide element.
this._super();
},
// Disable: Mode Off/Disable (0)
// Indicates that the text track is not active. Other than for the purposes of exposing the track in the DOM, the user agent is ignoring the text track.
// No cues are active, no events are fired, and the user agent will not attempt to obtain the track's cues.
disable: function(){
// If showing, hide.
if (this.mode == 2) { this.hide(); }
// Stop triggering cues
this.deactivate();
// Switch Mode to Off
this.mode = 0;
},
// Turn on cue tracking. Tracks that are showing OR hidden are active.
activate: function(){
// Load text file if it hasn't been yet.
if (this.readyState == 0) { this.load(); }
// Only activate if not already active.
if (this.mode == 0) {
// Update current cue on timeupdate
// Using unique ID for proxy function so other tracks don't remove listener
this.player.on("timeupdate", this.proxy(this.update, this.id));
// Reset cue time on media end
this.player.on("ended", this.proxy(this.reset, this.id));
// Add to display
if (this.kind == "captions" || this.kind == "subtitles") {
this.player.textTrackDisplay.addComponent(this);
}
}
},
// Turn off cue tracking.
deactivate: function(){
// Using unique ID for proxy function so other tracks don't remove listener
this.player.off("timeupdate", this.proxy(this.update, this.id));
this.player.off("ended", this.proxy(this.reset, this.id));
this.reset(); // Reset
// Remove from display
this.player.textTrackDisplay.removeComponent(this);
},
// A readiness state
// One of the following:
//
// Not loaded
// Indicates that the text track is known to exist (e.g. it has been declared with a track element), but its cues have not been obtained.
//
// Loading
// Indicates that the text track is loading and there have been no fatal errors encountered so far. Further cues might still be added to the track.
//
// Loaded
// Indicates that the text track has been loaded with no fatal errors. No new cues will be added to the track except if the text track corresponds to a MutableTextTrack object.
//
// Failed to load
// Indicates that the text track was enabled, but when the user agent attempted to obtain it, this failed in some way (e.g. URL could not be resolved, network error, unknown text track format). Some or all of the cues are likely missing and will not be obtained.
load: function(){
// Only load if not loaded yet.
if (this.readyState == 0) {
this.readyState = 1;
_V_.get(this.src, this.proxy(this.parseCues), this.proxy(this.onError));
}
},
onError: function(err){
this.error = err;
this.readyState = 3;
this.trigger("error");
},
// Parse the WebVTT text format for cue times.
// TODO: Separate parser into own class so alternative timed text formats can be used. (TTML, DFXP)
parseCues: function(srcContent) {
var cue, time, text,
lines = srcContent.split("\n"),
line = "", id;
for (var i=1, j=lines.length; i") == -1) {
id = line;
// Advance to next line for timing.
line = _V_.trim(lines[++i]);
} else {
id = this.cues.length;
}
// First line - Number
cue = {
id: id, // Cue Number
index: this.cues.length // Position in Array
};
// Timing line
time = line.split(" --> ");
cue.startTime = this.parseCueTime(time[0]);
cue.endTime = this.parseCueTime(time[1]);
// Additional lines - Cue Text
text = [];
// Loop until a blank line or end of lines
// Assumeing trim("") returns false for blank lines
while (lines[++i] && (line = _V_.trim(lines[i]))) {
text.push(line);
}
cue.text = text.join(' ');
// Add this cue
this.cues.push(cue);
}
}
this.readyState = 2;
this.trigger("loaded");
},
parseCueTime: function(timeText) {
var parts = timeText.split(':'),
time = 0,
hours, minutes, other, seconds, ms, flags;
// Check if optional hours place is included
// 00:00:00.000 vs. 00:00.000
if (parts.length == 3) {
hours = parts[0];
minutes = parts[1];
other = parts[2];
} else {
hours = 0;
minutes = parts[0];
other = parts[1];
}
// Break other (seconds, milliseconds, and flags) by spaces
// TODO: Make additional cue layout settings work with flags
other = other.split(/\s+/)
// Remove seconds. Seconds is the first part before any spaces.
seconds = other.splice(0,1)[0];
// Could use either . or , for decimal
seconds = seconds.split(/\.|,/);
// Get milliseconds
ms = parseFloat(seconds[1]);
seconds = seconds[0];
// hours => seconds
time += parseFloat(hours) * 3600;
// minutes => seconds
time += parseFloat(minutes) * 60;
// Add seconds
time += parseFloat(seconds);
// Add milliseconds
if (ms) { time += ms/1000; }
return time;
},
// Update active cues whenever timeupdate events are triggered on the player.
update: function(){
if (this.cues.length > 0) {
// Get curent player time
var time = this.player.currentTime();
// Check if the new time is outside the time box created by the the last update.
if (this.prevChange === undefined || time < this.prevChange || this.nextChange <= time) {
var cues = this.cues,
// Create a new time box for this state.
newNextChange = this.player.duration(), // Start at beginning of the timeline
newPrevChange = 0, // Start at end
reverse = false, // Set the direction of the loop through the cues. Optimized the cue check.
newCues = [], // Store new active cues.
// Store where in the loop the current active cues are, to provide a smart starting point for the next loop.
firstActiveIndex, lastActiveIndex,
html = "", // Create cue text HTML to add to the display
cue, i, j; // Loop vars
// Check if time is going forwards or backwards (scrubbing/rewinding)
// If we know the direction we can optimize the starting position and direction of the loop through the cues array.
if (time >= this.nextChange || this.nextChange === undefined) { // NextChange should happen
// Forwards, so start at the index of the first active cue and loop forward
i = (this.firstActiveIndex !== undefined) ? this.firstActiveIndex : 0;
} else {
// Backwards, so start at the index of the last active cue and loop backward
reverse = true;
i = (this.lastActiveIndex !== undefined) ? this.lastActiveIndex : cues.length - 1;
}
while (true) { // Loop until broken
cue = cues[i];
// Cue ended at this point
if (cue.endTime <= time) {
newPrevChange = Math.max(newPrevChange, cue.endTime);
if (cue.active) {
cue.active = false;
}
// No earlier cues should have an active start time.
// Nevermind. Assume first cue could have a duration the same as the video.
// In that case we need to loop all the way back to the beginning.
// if (reverse && cue.startTime) { break; }
// Cue hasn't started
} else if (time < cue.startTime) {
newNextChange = Math.min(newNextChange, cue.startTime);
if (cue.active) {
cue.active = false;
}
// No later cues should have an active start time.
if (!reverse) { break; }
// Cue is current
} else {
if (reverse) {
// Add cue to front of array to keep in time order
newCues.splice(0,0,cue);
// If in reverse, the first current cue is our lastActiveCue
if (lastActiveIndex === undefined) { lastActiveIndex = i; }
firstActiveIndex = i;
} else {
// Add cue to end of array
newCues.push(cue);
// If forward, the first current cue is our firstActiveIndex
if (firstActiveIndex === undefined) { firstActiveIndex = i; }
lastActiveIndex = i;
}
newNextChange = Math.min(newNextChange, cue.endTime);
newPrevChange = Math.max(newPrevChange, cue.startTime);
cue.active = true;
}
if (reverse) {
// Reverse down the array of cues, break if at first
if (i === 0) { break; } else { i--; }
} else {
// Walk up the array fo cues, break if at last
if (i === cues.length - 1) { break; } else { i++; }
}
}
this.activeCues = newCues;
this.nextChange = newNextChange;
this.prevChange = newPrevChange;
this.firstActiveIndex = firstActiveIndex;
this.lastActiveIndex = lastActiveIndex;
this.updateDisplay();
this.trigger("cuechange");
}
}
},
// Add cue HTML to display
updateDisplay: function(){
var cues = this.activeCues,
html = "",
i=0,j=cues.length;
for (;i"+cues[i].text+"";
}
this.el.innerHTML = html;
},
// Set all loop helper values back
reset: function(){
this.nextChange = 0;
this.prevChange = this.player.duration();
this.firstActiveIndex = 0;
this.lastActiveIndex = 0;
}
});
// Create specific track types
_V_.CaptionsTrack = _V_.Track.extend({
kind: "captions"
});
_V_.SubtitlesTrack = _V_.Track.extend({
kind: "subtitles"
});
_V_.ChaptersTrack = _V_.Track.extend({
kind: "chapters"
});
/* Text Track Display
================================================================================ */
// Global container for both subtitle and captions text. Simple div container.
_V_.TextTrackDisplay = _V_.Component.extend({
createElement: function(){
return this._super("div", {
className: "vjs-text-track-display"
});
}
});
/* Text Track Menu Items
================================================================================ */
_V_.TextTrackMenuItem = _V_.MenuItem.extend({
init: function(player, options){
var track = this.track = options.track;
// Modify options for parent MenuItem class's init.
options.label = track.label;
options.selected = track["default"];
this._super(player, options);
this.player.on(track.kind + "trackchange", _V_.proxy(this, this.update));
},
onClick: function(){
this._super();
this.player.showTextTrack(this.track.id, this.track.kind);
},
update: function(){
if (this.track.mode == 2) {
this.selected(true);
} else {
this.selected(false);
}
}
});
_V_.OffTextTrackMenuItem = _V_.TextTrackMenuItem.extend({
init: function(player, options){
// Create pseudo track info
// Requires options.kind
options.track = { kind: options.kind, player: player, label: "Off" }
this._super(player, options);
},
onClick: function(){
this._super();
this.player.showTextTrack(this.track.id, this.track.kind);
},
update: function(){
var tracks = this.player.textTracks,
i=0, j=tracks.length, track,
off = true;
for (;i 0) {
this.show();
}
return menu;
}
});
_V_.ChaptersTrackMenuItem = _V_.MenuItem.extend({
init: function(player, options){
var track = this.track = options.track,
cue = this.cue = options.cue,
currentTime = player.currentTime();
// Modify options for parent MenuItem class's init.
options.label = cue.text;
options.selected = (cue.startTime <= currentTime && currentTime < cue.endTime);
this._super(player, options);
track.on("cuechange", _V_.proxy(this, this.update));
},
onClick: function(){
this._super();
this.player.currentTime(this.cue.startTime);
this.update(this.cue.startTime);
},
update: function(time){
var cue = this.cue,
currentTime = this.player.currentTime();
// _V_.log(currentTime, cue.startTime);
if (cue.startTime <= currentTime && currentTime < cue.endTime) {
this.selected(true);
} else {
this.selected(false);
}
}
});
// Add Buttons to controlBar
_V_.merge(_V_.ControlBar.prototype.options.components, {
"subtitlesButton": {},
"captionsButton": {},
"chaptersButton": {}
});
// _V_.Cue = _V_.Component.extend({
// init: function(player, options){
// this._super(player, options);
// }
// });// Automatically set up any tags that have a data-setup attribute
_V_.autoSetup = function(){
var options, vid, player,
vids = document.getElementsByTagName("video");
// Check if any media elements exist
if (vids && vids.length > 0) {
for (var i=0,j=vids.length; i