myButton
+ * // -> myButton === myComonent.children()[0];
+ *
+ * Pass in options for child constructors and options for children of the child
+ *
+ * var myButton = myComponent.addChild('MyButton', {
+ * text: 'Press Me',
+ * children: {
+ * buttonChildExample: {
+ * buttonChildOption: true
+ * }
+ * }
+ * });
+ *
+ * @param {String|vjs.Component} child The class name or instance of a child to add
+ * @param {Object=} options Options, including options to be passed to children of the child.
+ * @return {vjs.Component} The child component (created by this process if a string was used)
+ * @suppress {accessControls|checkRegExp|checkTypes|checkVars|const|constantProperty|deprecated|duplicate|es5Strict|fileoverviewTags|globalThis|invalidCasts|missingProperties|nonStandardJsDocs|strictModuleDepCheck|undefinedNames|undefinedVars|unknownDefines|uselessCode|visibility}
+ */
+vjs.Component.prototype.addChild = function(child, options){
+ var component, componentClass, componentName;
+
+ // If child is a string, create new component with options
+ if (typeof child === 'string') {
+ componentName = child;
+
+ // Make sure options is at least an empty object to protect against errors
+ options = options || {};
+
+ // If no componentClass in options, assume componentClass is the name lowercased
+ // (e.g. playButton)
+ componentClass = options['componentClass'] || vjs.capitalize(componentName);
+
+ // Set name through options
+ options['name'] = componentName;
+
+ // Create a new object & element for this controls set
+ // If there's no .player_, this is a player
+ // Closure Compiler throws an 'incomplete alias' warning if we use the vjs variable directly.
+ // Every class should be exported, so this should never be a problem here.
+ component = new window['videojs'][componentClass](this.player_ || this, options);
+
+ // child is a component instance
+ } else {
+ component = child;
+ }
+
+ this.children_.push(component);
+
+ if (typeof component.id === 'function') {
+ this.childIndex_[component.id()] = component;
+ }
+
+ // If a name wasn't used to create the component, check if we can use the
+ // name function of the component
+ componentName = componentName || (component.name && component.name());
+
+ if (componentName) {
+ this.childNameIndex_[componentName] = component;
+ }
+
+ // Add the UI object's element to the container div (box)
+ // Having an element is not required
+ if (typeof component['el'] === 'function' && component['el']()) {
+ this.contentEl().appendChild(component['el']());
+ }
+
+ // Return so it can stored on parent object if desired.
+ return component;
+};
+
+/**
+ * Remove a child component from this component's list of children, and the
+ * child component's element from this component's element
+ *
+ * @param {vjs.Component} component Component to remove
+ */
+vjs.Component.prototype.removeChild = function(component){
+ if (typeof component === 'string') {
+ component = this.getChild(component);
+ }
+
+ if (!component || !this.children_) return;
+
+ var childFound = false;
+ for (var i = this.children_.length - 1; i >= 0; i--) {
+ if (this.children_[i] === component) {
+ childFound = true;
+ this.children_.splice(i,1);
+ break;
+ }
+ }
+
+ if (!childFound) return;
+
+ this.childIndex_[component.id()] = null;
+ this.childNameIndex_[component.name()] = null;
+
+ var compEl = component.el();
+ if (compEl && compEl.parentNode === this.contentEl()) {
+ this.contentEl().removeChild(component.el());
+ }
+};
+
+/**
+ * Add and initialize default child components from options
+ *
+ * // when an instance of MyComponent is created, all children in options
+ * // will be added to the instance by their name strings and options
+ * MyComponent.prototype.options_.children = {
+ * myChildComponent: {
+ * myChildOption: true
+ * }
+ * }
+ *
+ * // Or when creating the component
+ * var myComp = new MyComponent(player, {
+ * children: {
+ * myChildComponent: {
+ * myChildOption: true
+ * }
+ * }
+ * });
+ *
+ * The children option can also be an Array of child names or
+ * child options objects (that also include a 'name' key).
+ *
+ * var myComp = new MyComponent(player, {
+ * children: [
+ * 'button',
+ * {
+ * name: 'button',
+ * someOtherOption: true
+ * }
+ * ]
+ * });
+ *
+ */
+vjs.Component.prototype.initChildren = function(){
+ var parent, parentOptions, children, child, name, opts, handleAdd;
+
+ parent = this;
+ parentOptions = parent.options();
+ children = parentOptions['children'];
+
+ if (children) {
+ handleAdd = function(name, opts){
+ // Allow options for children to be set at the parent options
+ // e.g. videojs(id, { controlBar: false });
+ // instead of videojs(id, { children: { controlBar: false });
+ if (parentOptions[name] !== undefined) {
+ opts = parentOptions[name];
+ }
+
+ // Allow for disabling default components
+ // e.g. vjs.options['children']['posterImage'] = false
+ if (opts === false) return;
+
+ // Create and add the child component.
+ // Add a direct reference to the child by name on the parent instance.
+ // If two of the same component are used, different names should be supplied
+ // for each
+ parent[name] = parent.addChild(name, opts);
+ };
+
+ // Allow for an array of children details to passed in the options
+ if (vjs.obj.isArray(children)) {
+ for (var i = 0; i < children.length; i++) {
+ child = children[i];
+
+ if (typeof child == 'string') {
+ // ['myComponent']
+ name = child;
+ opts = {};
+ } else {
+ // [{ name: 'myComponent', otherOption: true }]
+ name = child.name;
+ opts = child;
+ }
+
+ handleAdd(name, opts);
+ }
+ } else {
+ vjs.obj.each(children, handleAdd);
+ }
+ }
+};
+
+/**
+ * Allows sub components to stack CSS class names
+ *
+ * @return {String} The constructed class name
+ */
+vjs.Component.prototype.buildCSSClass = function(){
+ // Child classes can include a function that does:
+ // return 'CLASS NAME' + this._super();
+ return '';
+};
+
+/* Events
+============================================================================= */
+
+/**
+ * Add an event listener to this component's element
+ *
+ * var myFunc = function(){
+ * var myComponent = this;
+ * // Do something when the event is fired
+ * };
+ *
+ * myComponent.on('eventType', myFunc);
+ *
+ * The context of myFunc will be myComponent unless previously bound.
+ *
+ * Alternatively, you can add a listener to another element or component.
+ *
+ * myComponent.on(otherElement, 'eventName', myFunc);
+ * myComponent.on(otherComponent, 'eventName', myFunc);
+ *
+ * The benefit of using this over `vjs.on(otherElement, 'eventName', myFunc)`
+ * and `otherComponent.on('eventName', myFunc)` is that this way the listeners
+ * will be automatically cleaned up when either component is disposed.
+ * It will also bind myComponent as the context of myFunc.
+ *
+ * **NOTE**: When using this on elements in the page other than window
+ * and document (both permanent), if you remove the element from the DOM
+ * you need to call `vjs.trigger(el, 'dispose')` on it to clean up
+ * references to it and allow the browser to garbage collect it.
+ *
+ * @param {String|vjs.Component} first The event type or other component
+ * @param {Function|String} second The event handler or event type
+ * @param {Function} third The event handler
+ * @return {vjs.Component} self
+ */
+vjs.Component.prototype.on = function(first, second, third){
+ var target, type, fn, removeOnDispose, cleanRemover, thisComponent;
+
+ if (typeof first === 'string' || vjs.obj.isArray(first)) {
+ vjs.on(this.el_, first, vjs.bind(this, second));
+
+ // Targeting another component or element
+ } else {
+ target = first;
+ type = second;
+ fn = vjs.bind(this, third);
+ thisComponent = this;
+
+ // When this component is disposed, remove the listener from the other component
+ removeOnDispose = function(){
+ thisComponent.off(target, type, fn);
+ };
+ // Use the same function ID so we can remove it later it using the ID
+ // of the original listener
+ removeOnDispose.guid = fn.guid;
+ this.on('dispose', removeOnDispose);
+
+ // If the other component is disposed first we need to clean the reference
+ // to the other component in this component's removeOnDispose listener
+ // Otherwise we create a memory leak.
+ cleanRemover = function(){
+ thisComponent.off('dispose', removeOnDispose);
+ };
+ // Add the same function ID so we can easily remove it later
+ cleanRemover.guid = fn.guid;
+
+ // Check if this is a DOM node
+ if (first.nodeName) {
+ // Add the listener to the other element
+ vjs.on(target, type, fn);
+ vjs.on(target, 'dispose', cleanRemover);
+
+ // Should be a component
+ // Not using `instanceof vjs.Component` because it makes mock players difficult
+ } else if (typeof first.on === 'function') {
+ // Add the listener to the other component
+ target.on(type, fn);
+ target.on('dispose', cleanRemover);
+ }
+ }
+
+ return this;
+};
+
+/**
+ * Remove an event listener from this component's element
+ *
+ * myComponent.off('eventType', myFunc);
+ *
+ * If myFunc is excluded, ALL listeners for the event type will be removed.
+ * If eventType is excluded, ALL listeners will be removed from the component.
+ *
+ * Alternatively you can use `off` to remove listeners that were added to other
+ * elements or components using `myComponent.on(otherComponent...`.
+ * In this case both the event type and listener function are REQUIRED.
+ *
+ * myComponent.off(otherElement, 'eventType', myFunc);
+ * myComponent.off(otherComponent, 'eventType', myFunc);
+ *
+ * @param {String=|vjs.Component} first The event type or other component
+ * @param {Function=|String} second The listener function or event type
+ * @param {Function=} third The listener for other component
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.off = function(first, second, third){
+ var target, otherComponent, type, fn, otherEl;
+
+ if (!first || typeof first === 'string' || vjs.obj.isArray(first)) {
+ vjs.off(this.el_, first, second);
+ } else {
+ target = first;
+ type = second;
+ // Ensure there's at least a guid, even if the function hasn't been used
+ fn = vjs.bind(this, third);
+
+ // Remove the dispose listener on this component,
+ // which was given the same guid as the event listener
+ this.off('dispose', fn);
+
+ if (first.nodeName) {
+ // Remove the listener
+ vjs.off(target, type, fn);
+ // Remove the listener for cleaning the dispose listener
+ vjs.off(target, 'dispose', fn);
+ } else {
+ target.off(type, fn);
+ target.off('dispose', fn);
+ }
+ }
+
+ return this;
+};
+
+/**
+ * Add an event listener to be triggered only once and then removed
+ *
+ * myComponent.one('eventName', myFunc);
+ *
+ * Alternatively you can add a listener to another element or component
+ * that will be triggered only once.
+ *
+ * myComponent.one(otherElement, 'eventName', myFunc);
+ * myComponent.one(otherComponent, 'eventName', myFunc);
+ *
+ * @param {String|vjs.Component} first The event type or other component
+ * @param {Function|String} second The listener function or event type
+ * @param {Function=} third The listener function for other component
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.one = function(first, second, third) {
+ var target, type, fn, thisComponent, newFunc;
+
+ if (typeof first === 'string' || vjs.obj.isArray(first)) {
+ vjs.one(this.el_, first, vjs.bind(this, second));
+ } else {
+ target = first;
+ type = second;
+ fn = vjs.bind(this, third);
+ thisComponent = this;
+
+ newFunc = function(){
+ thisComponent.off(target, type, newFunc);
+ fn.apply(this, arguments);
+ };
+ // Keep the same function ID so we can remove it later
+ newFunc.guid = fn.guid;
+
+ this.on(target, type, newFunc);
+ }
+
+ return this;
+};
+
+/**
+ * Trigger an event on an element
+ *
+ * myComponent.trigger('eventName');
+ * myComponent.trigger({'type':'eventName'});
+ *
+ * @param {Event|Object|String} event A string (the type) or an event object with a type attribute
+ * @return {vjs.Component} self
+ */
+vjs.Component.prototype.trigger = function(event){
+ vjs.trigger(this.el_, event);
+ return this;
+};
+
+/* Ready
+================================================================================ */
+/**
+ * Is the component loaded
+ * This can mean different things depending on the component.
+ *
+ * @private
+ * @type {Boolean}
+ */
+vjs.Component.prototype.isReady_;
+
+/**
+ * Trigger ready as soon as initialization is finished
+ *
+ * Allows for delaying ready. Override on a sub class prototype.
+ * If you set this.isReadyOnInitFinish_ it will affect all components.
+ * Specially used when waiting for the Flash player to asynchronously load.
+ *
+ * @type {Boolean}
+ * @private
+ */
+vjs.Component.prototype.isReadyOnInitFinish_ = true;
+
+/**
+ * List of ready listeners
+ *
+ * @type {Array}
+ * @private
+ */
+vjs.Component.prototype.readyQueue_;
+
+/**
+ * Bind a listener to the component's ready state
+ *
+ * Different from event listeners in that if the ready event has already happened
+ * it will trigger the function immediately.
+ *
+ * @param {Function} fn Ready listener
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.ready = function(fn){
+ if (fn) {
+ if (this.isReady_) {
+ fn.call(this);
+ } else {
+ if (this.readyQueue_ === undefined) {
+ this.readyQueue_ = [];
+ }
+ this.readyQueue_.push(fn);
+ }
+ }
+ return this;
+};
+
+/**
+ * Trigger the ready listeners
+ *
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.triggerReady = function(){
+ this.isReady_ = true;
+
+ var readyQueue = this.readyQueue_;
+
+ if (readyQueue && readyQueue.length > 0) {
+
+ for (var i = 0, j = readyQueue.length; i < j; i++) {
+ readyQueue[i].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');
+ }
+};
+
+/* Display
+============================================================================= */
+
+/**
+ * Check if a component's element has a CSS class name
+ *
+ * @param {String} classToCheck Classname to check
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.hasClass = function(classToCheck){
+ return vjs.hasClass(this.el_, classToCheck);
+};
+
+/**
+ * Add a CSS class name to the component's element
+ *
+ * @param {String} classToAdd Classname to add
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.addClass = function(classToAdd){
+ vjs.addClass(this.el_, classToAdd);
+ return this;
+};
+
+/**
+ * Remove a CSS class name from the component's element
+ *
+ * @param {String} classToRemove Classname to remove
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.removeClass = function(classToRemove){
+ vjs.removeClass(this.el_, classToRemove);
+ return this;
+};
+
+/**
+ * Show the component element if hidden
+ *
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.show = function(){
+ this.removeClass('vjs-hidden');
+ return this;
+};
+
+/**
+ * Hide the component element if currently showing
+ *
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.hide = function(){
+ this.addClass('vjs-hidden');
+ return this;
+};
+
+/**
+ * Lock an item in its visible state
+ * To be used with fadeIn/fadeOut.
+ *
+ * @return {vjs.Component}
+ * @private
+ */
+vjs.Component.prototype.lockShowing = function(){
+ this.addClass('vjs-lock-showing');
+ return this;
+};
+
+/**
+ * Unlock an item to be hidden
+ * To be used with fadeIn/fadeOut.
+ *
+ * @return {vjs.Component}
+ * @private
+ */
+vjs.Component.prototype.unlockShowing = function(){
+ this.removeClass('vjs-lock-showing');
+ return this;
+};
+
+/**
+ * Disable component by making it unshowable
+ *
+ * Currently private because we're moving towards more css-based states.
+ * @private
+ */
+vjs.Component.prototype.disable = function(){
+ this.hide();
+ this.show = function(){};
+};
+
+/**
+ * Set or get the width of the component (CSS values)
+ *
+ * Setting the video tag dimension values only works with values in pixels.
+ * Percent values will not work.
+ * Some percents can be used, but width()/height() will return the number + %,
+ * not the actual computed width/height.
+ *
+ * @param {Number|String=} num Optional width number
+ * @param {Boolean} skipListeners Skip the 'resize' event trigger
+ * @return {vjs.Component} This component, when setting the width
+ * @return {Number|String} The width, when getting
+ */
+vjs.Component.prototype.width = function(num, skipListeners){
+ return this.dimension('width', num, skipListeners);
+};
+
+/**
+ * Get or set the height of the component (CSS values)
+ *
+ * Setting the video tag dimension values only works with values in pixels.
+ * Percent values will not work.
+ * Some percents can be used, but width()/height() will return the number + %,
+ * not the actual computed width/height.
+ *
+ * @param {Number|String=} num New component height
+ * @param {Boolean=} skipListeners Skip the resize event trigger
+ * @return {vjs.Component} This component, when setting the height
+ * @return {Number|String} The height, when getting
+ */
+vjs.Component.prototype.height = function(num, skipListeners){
+ return this.dimension('height', num, skipListeners);
+};
+
+/**
+ * Set both width and height at the same time
+ *
+ * @param {Number|String} width
+ * @param {Number|String} height
+ * @return {vjs.Component} The component
+ */
+vjs.Component.prototype.dimensions = function(width, height){
+ // Skip resize listeners on width for optimization
+ return this.width(width, true).height(height);
+};
+
+/**
+ * Get or set width or height
+ *
+ * This is the shared code for the width() and height() methods.
+ * All for an integer, integer + 'px' or integer + '%';
+ *
+ * Known issue: Hidden elements officially have a width of 0. We're defaulting
+ * to the style.width value and falling back to computedStyle which has the
+ * hidden element issue. Info, but probably not an efficient fix:
+ * http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/
+ *
+ * @param {String} widthOrHeight 'width' or 'height'
+ * @param {Number|String=} num New dimension
+ * @param {Boolean=} skipListeners Skip resize event trigger
+ * @return {vjs.Component} The component if a dimension was set
+ * @return {Number|String} The dimension if nothing was set
+ * @private
+ */
+vjs.Component.prototype.dimension = function(widthOrHeight, num, skipListeners){
+ if (num !== undefined) {
+ if (num === null || vjs.isNaN(num)) {
+ num = 0;
+ }
+
+ // Check if using css width/height (% or px) and adjust
+ if ((''+num).indexOf('%') !== -1 || (''+num).indexOf('px') !== -1) {
+ this.el_.style[widthOrHeight] = num;
+ } else if (num === 'auto') {
+ this.el_.style[widthOrHeight] = '';
+ } 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 component
+ return this;
+ }
+
+ // Not setting a value, so getting it
+ // Make sure element exists
+ if (!this.el_) return 0;
+
+ // Get dimension value from style
+ var val = this.el_.style[widthOrHeight];
+ var pxIndex = val.indexOf('px');
+ if (pxIndex !== -1) {
+ // Return the pixel value with no 'px'
+ return parseInt(val.slice(0,pxIndex), 10);
+
+ // No px so using % or no style was set, so falling back to offsetWidth/height
+ // If component has display:none, offset will return 0
+ // TODO: handle display:none and no dimension style using px
+ } else {
+
+ return parseInt(this.el_['offset'+vjs.capitalize(widthOrHeight)], 10);
+
+ // ComputedStyle version.
+ // Only difference is if the element is hidden it will return
+ // the percent value (e.g. '100%'')
+ // instead of zero like offsetWidth returns.
+ // var val = vjs.getComputedStyleValue(this.el_, widthOrHeight);
+ // var pxIndex = val.indexOf('px');
+
+ // if (pxIndex !== -1) {
+ // return val.slice(0, pxIndex);
+ // } else {
+ // return val;
+ // }
+ }
+};
+
+/**
+ * Fired when the width and/or height of the component changes
+ * @event resize
+ */
+vjs.Component.prototype.onResize;
+
+/**
+ * Emit 'tap' events when touch events are supported
+ *
+ * This is used to support toggling the controls through a tap on the video.
+ *
+ * We're requiring them to be enabled because otherwise every component would
+ * have this extra overhead unnecessarily, on mobile devices where extra
+ * overhead is especially bad.
+ * @private
+ */
+vjs.Component.prototype.emitTapEvents = function(){
+ var touchStart, firstTouch, touchTime, couldBeTap, noTap,
+ xdiff, ydiff, touchDistance, tapMovementThreshold, touchTimeThreshold;
+
+ // Track the start time so we can determine how long the touch lasted
+ touchStart = 0;
+ firstTouch = null;
+
+ // Maximum movement allowed during a touch event to still be considered a tap
+ // Other popular libs use anywhere from 2 (hammer.js) to 15, so 10 seems like a nice, round number.
+ tapMovementThreshold = 10;
+
+ // The maximum length a touch can be while still being considered a tap
+ touchTimeThreshold = 200;
+
+ this.on('touchstart', function(event) {
+ // If more than one finger, don't consider treating this as a click
+ if (event.touches.length === 1) {
+ firstTouch = vjs.obj.copy(event.touches[0]);
+ // Record start time so we can detect a tap vs. "touch and hold"
+ touchStart = new Date().getTime();
+ // Reset couldBeTap tracking
+ couldBeTap = true;
+ }
+ });
+
+ this.on('touchmove', function(event) {
+ // If more than one finger, don't consider treating this as a click
+ if (event.touches.length > 1) {
+ couldBeTap = false;
+ } else if (firstTouch) {
+ // Some devices will throw touchmoves for all but the slightest of taps.
+ // So, if we moved only a small distance, this could still be a tap
+ xdiff = event.touches[0].pageX - firstTouch.pageX;
+ ydiff = event.touches[0].pageY - firstTouch.pageY;
+ touchDistance = Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+ if (touchDistance > tapMovementThreshold) {
+ couldBeTap = false;
+ }
+ }
+ });
+
+ noTap = function(){
+ couldBeTap = false;
+ };
+ // TODO: Listen to the original target. http://youtu.be/DujfpXOKUp8?t=13m8s
+ this.on('touchleave', noTap);
+ this.on('touchcancel', noTap);
+
+ // When the touch ends, measure how long it took and trigger the appropriate
+ // event
+ this.on('touchend', function(event) {
+ firstTouch = null;
+ // Proceed only if the touchmove/leave/cancel event didn't happen
+ if (couldBeTap === true) {
+ // Measure how long the touch lasted
+ touchTime = new Date().getTime() - touchStart;
+ // Make sure the touch was less than the threshold to be considered a tap
+ if (touchTime < touchTimeThreshold) {
+ event.preventDefault(); // Don't let browser turn this into a click
+ this.trigger('tap');
+ // It may be good to copy the touchend event object and change the
+ // type to tap, if the other event properties aren't exact after
+ // vjs.fixEvent runs (e.g. event.target)
+ }
+ }
+ });
+};
+
+/**
+ * Report user touch activity when touch events occur
+ *
+ * User activity is used to determine when controls should show/hide. It's
+ * relatively simple when it comes to mouse events, because any mouse event
+ * should show the controls. So we capture mouse events that bubble up to the
+ * player and report activity when that happens.
+ *
+ * With touch events it isn't as easy. We can't rely on touch events at the
+ * player level, because a tap (touchstart + touchend) on the video itself on
+ * mobile devices is meant to turn controls off (and on). User activity is
+ * checked asynchronously, so what could happen is a tap event on the video
+ * turns the controls off, then the touchend event bubbles up to the player,
+ * which if it reported user activity, would turn the controls right back on.
+ * (We also don't want to completely block touch events from bubbling up)
+ *
+ * Also a touchmove, touch+hold, and anything other than a tap is not supposed
+ * to turn the controls back on on a mobile device.
+ *
+ * Here we're setting the default component behavior to report user activity
+ * whenever touch events happen, and this can be turned off by components that
+ * want touch events to act differently.
+ */
+vjs.Component.prototype.enableTouchActivity = function() {
+ var report, touchHolding, touchEnd;
+
+ // Don't continue if the root player doesn't support reporting user activity
+ if (!this.player().reportUserActivity) {
+ return;
+ }
+
+ // listener for reporting that the user is active
+ report = vjs.bind(this.player(), this.player().reportUserActivity);
+
+ this.on('touchstart', function() {
+ report();
+ // For as long as the they are touching the device or have their mouse down,
+ // we consider them active even if they're not moving their finger or mouse.
+ // So we want to continue to update that they are active
+ this.clearInterval(touchHolding);
+ // report at the same interval as activityCheck
+ touchHolding = this.setInterval(report, 250);
+ });
+
+ touchEnd = function(event) {
+ report();
+ // stop the interval that maintains activity if the touch is holding
+ this.clearInterval(touchHolding);
+ };
+
+ this.on('touchmove', report);
+ this.on('touchend', touchEnd);
+ this.on('touchcancel', touchEnd);
+};
+
+/**
+ * Creates timeout and sets up disposal automatically.
+ * @param {Function} fn The function to run after the timeout.
+ * @param {Number} timeout Number of ms to delay before executing specified function.
+ * @return {Number} Returns the timeout ID
+ */
+vjs.Component.prototype.setTimeout = function(fn, timeout) {
+ fn = vjs.bind(this, fn);
+
+ // window.setTimeout would be preferable here, but due to some bizarre issue with Sinon and/or Phantomjs, we can't.
+ var timeoutId = setTimeout(fn, timeout);
+
+ var disposeFn = function() {
+ this.clearTimeout(timeoutId);
+ };
+
+ disposeFn.guid = 'vjs-timeout-'+ timeoutId;
+
+ this.on('dispose', disposeFn);
+
+ return timeoutId;
+};
+
+
+/**
+ * Clears a timeout and removes the associated dispose listener
+ * @param {Number} timeoutId The id of the timeout to clear
+ * @return {Number} Returns the timeout ID
+ */
+vjs.Component.prototype.clearTimeout = function(timeoutId) {
+ clearTimeout(timeoutId);
+
+ var disposeFn = function(){};
+ disposeFn.guid = 'vjs-timeout-'+ timeoutId;
+
+ this.off('dispose', disposeFn);
+
+ return timeoutId;
+};
+
+/**
+ * Creates an interval and sets up disposal automatically.
+ * @param {Function} fn The function to run every N seconds.
+ * @param {Number} interval Number of ms to delay before executing specified function.
+ * @return {Number} Returns the interval ID
+ */
+vjs.Component.prototype.setInterval = function(fn, interval) {
+ fn = vjs.bind(this, fn);
+
+ var intervalId = setInterval(fn, interval);
+
+ var disposeFn = function() {
+ this.clearInterval(intervalId);
+ };
+
+ disposeFn.guid = 'vjs-interval-'+ intervalId;
+
+ this.on('dispose', disposeFn);
+
+ return intervalId;
+};
+
+/**
+ * Clears an interval and removes the associated dispose listener
+ * @param {Number} intervalId The id of the interval to clear
+ * @return {Number} Returns the interval ID
+ */
+vjs.Component.prototype.clearInterval = function(intervalId) {
+ clearInterval(intervalId);
+
+ var disposeFn = function(){};
+ disposeFn.guid = 'vjs-interval-'+ intervalId;
+
+ this.off('dispose', disposeFn);
+
+ return intervalId;
+};
+/* Button - Base class for all buttons
+================================================================================ */
+/**
+ * Base class for all buttons
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @class
+ * @constructor
+ */
+vjs.Button = vjs.Component.extend({
+ /**
+ * @constructor
+ * @inheritDoc
+ */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ this.emitTapEvents();
+
+ this.on('tap', this.onClick);
+ this.on('click', this.onClick);
+ this.on('focus', this.onFocus);
+ this.on('blur', this.onBlur);
+ }
+});
+
+vjs.Button.prototype.createEl = function(type, props){
+ var el;
+
+ // Add standard Aria and Tabindex info
+ props = vjs.obj.merge({
+ className: this.buildCSSClass(),
+ 'role': 'button',
+ 'aria-live': 'polite', // let the screen reader user know that the text of the button may change
+ tabIndex: 0
+ }, props);
+
+ el = vjs.Component.prototype.createEl.call(this, type, props);
+
+ // if innerHTML hasn't been overridden (bigPlayButton), add content elements
+ if (!props.innerHTML) {
+ this.contentEl_ = vjs.createEl('div', {
+ className: 'vjs-control-content'
+ });
+
+ this.controlText_ = vjs.createEl('span', {
+ className: 'vjs-control-text',
+ innerHTML: this.localize(this.buttonText) || 'Need Text'
+ });
+
+ this.contentEl_.appendChild(this.controlText_);
+ el.appendChild(this.contentEl_);
+ }
+
+ return el;
+};
+
+vjs.Button.prototype.buildCSSClass = function(){
+ // TODO: Change vjs-control to vjs-button?
+ return 'vjs-control ' + vjs.Component.prototype.buildCSSClass.call(this);
+};
+
+ // Click - Override with specific functionality for button
+vjs.Button.prototype.onClick = function(){};
+
+ // Focus - Add keyboard functionality to element
+vjs.Button.prototype.onFocus = function(){
+ vjs.on(document, 'keydown', vjs.bind(this, this.onKeyPress));
+};
+
+ // KeyPress (document level) - Trigger click when keys are pressed
+vjs.Button.prototype.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
+vjs.Button.prototype.onBlur = function(){
+ vjs.off(document, 'keydown', vjs.bind(this, this.onKeyPress));
+};
+/* Slider
+================================================================================ */
+/**
+ * The base functionality for sliders like the volume bar and seek bar
+ *
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.Slider = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ // Set property names to bar and handle to match with the child Slider class is looking for
+ this.bar = this.getChild(this.options_['barName']);
+ this.handle = this.getChild(this.options_['handleName']);
+
+ this.on('mousedown', this.onMouseDown);
+ this.on('touchstart', this.onMouseDown);
+ this.on('focus', this.onFocus);
+ this.on('blur', this.onBlur);
+ this.on('click', this.onClick);
+
+ this.on(player, 'controlsvisible', this.update);
+ this.on(player, this.playerEvent, this.update);
+ }
+});
+
+vjs.Slider.prototype.createEl = function(type, props) {
+ props = props || {};
+ // Add the slider element class to all sub classes
+ props.className = props.className + ' vjs-slider';
+ props = vjs.obj.merge({
+ 'role': 'slider',
+ 'aria-valuenow': 0,
+ 'aria-valuemin': 0,
+ 'aria-valuemax': 100,
+ tabIndex: 0
+ }, props);
+
+ return vjs.Component.prototype.createEl.call(this, type, props);
+};
+
+vjs.Slider.prototype.onMouseDown = function(event){
+ event.preventDefault();
+ vjs.blockTextSelection();
+ this.addClass('vjs-sliding');
+
+ this.on(document, 'mousemove', this.onMouseMove);
+ this.on(document, 'mouseup', this.onMouseUp);
+ this.on(document, 'touchmove', this.onMouseMove);
+ this.on(document, 'touchend', this.onMouseUp);
+
+ this.onMouseMove(event);
+};
+
+// To be overridden by a subclass
+vjs.Slider.prototype.onMouseMove = function(){};
+
+vjs.Slider.prototype.onMouseUp = function() {
+ vjs.unblockTextSelection();
+ this.removeClass('vjs-sliding');
+
+ this.off(document, 'mousemove', this.onMouseMove);
+ this.off(document, 'mouseup', this.onMouseUp);
+ this.off(document, 'touchmove', this.onMouseMove);
+ this.off(document, 'touchend', this.onMouseUp);
+
+ this.update();
+};
+
+vjs.Slider.prototype.update = function(){
+ // In VolumeBar init we have a setTimeout for update that pops and update to the end of the
+ // execution stack. The player is destroyed before then update will cause an error
+ if (!this.el_) return;
+
+ // 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_.getCache().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 (typeof progress !== 'number' ||
+ progress !== progress ||
+ progress < 0 ||
+ progress === Infinity) {
+ 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 = vjs.round(adjustedProgress * 100, 2) + '%';
+ }
+
+ // Set the new bar width
+ if (bar) {
+ bar.el().style.width = vjs.round(barProgress * 100, 2) + '%';
+ }
+};
+
+vjs.Slider.prototype.calculateDistance = function(event){
+ var el, box, boxX, boxY, boxW, boxH, handle, pageX, pageY;
+
+ el = this.el_;
+ box = vjs.findPosition(el);
+ boxW = boxH = el.offsetWidth;
+ handle = this.handle;
+
+ if (this.options()['vertical']) {
+ boxY = box.top;
+
+ if (event.changedTouches) {
+ pageY = event.changedTouches[0].pageY;
+ } else {
+ pageY = event.pageY;
+ }
+
+ if (handle) {
+ var handleH = handle.el().offsetHeight;
+ // Adjusted X and Width, so handle doesn't go outside the bar
+ boxY = boxY + (handleH / 2);
+ boxH = boxH - handleH;
+ }
+
+ // Percent that the click is through the adjusted area
+ return Math.max(0, Math.min(1, ((boxY - pageY) + boxH) / boxH));
+
+ } else {
+ boxX = box.left;
+
+ if (event.changedTouches) {
+ pageX = event.changedTouches[0].pageX;
+ } else {
+ pageX = event.pageX;
+ }
+
+ 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, (pageX - boxX) / boxW));
+ }
+};
+
+vjs.Slider.prototype.onFocus = function(){
+ this.on(document, 'keydown', this.onKeyPress);
+};
+
+vjs.Slider.prototype.onKeyPress = function(event){
+ if (event.which == 37 || event.which == 40) { // Left and Down Arrows
+ event.preventDefault();
+ this.stepBack();
+ } else if (event.which == 38 || event.which == 39) { // Up and Right Arrows
+ event.preventDefault();
+ this.stepForward();
+ }
+};
+
+vjs.Slider.prototype.onBlur = function(){
+ this.off(document, 'keydown', this.onKeyPress);
+};
+
+/**
+ * Listener for click events on slider, used to prevent clicks
+ * from bubbling up to parent elements like button menus.
+ * @param {Object} event Event object
+ */
+vjs.Slider.prototype.onClick = function(event){
+ event.stopImmediatePropagation();
+ event.preventDefault();
+};
+
+/**
+ * SeekBar Behavior includes play progress bar, and seek handle
+ * Needed so it can determine seek position based on handle position/size
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.SliderHandle = vjs.Component.extend();
+
+/**
+ * Default value of the slider
+ *
+ * @type {Number}
+ * @private
+ */
+vjs.SliderHandle.prototype.defaultValue = 0;
+
+/** @inheritDoc */
+vjs.SliderHandle.prototype.createEl = function(type, props) {
+ props = props || {};
+ // Add the slider element class to all sub classes
+ props.className = props.className + ' vjs-slider-handle';
+ props = vjs.obj.merge({
+ innerHTML: '
'+this.defaultValue+' '
+ }, props);
+
+ return vjs.Component.prototype.createEl.call(this, 'div', props);
+};
+/* Menu
+================================================================================ */
+/**
+ * The Menu component is used to build pop up menus, including subtitle and
+ * captions selection menus.
+ *
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @class
+ * @constructor
+ */
+vjs.Menu = vjs.Component.extend();
+
+/**
+ * Add a menu item to the menu
+ * @param {Object|String} component Component or component type to add
+ */
+vjs.Menu.prototype.addItem = function(component){
+ this.addChild(component);
+ component.on('click', vjs.bind(this, function(){
+ this.unlockShowing();
+ }));
+};
+
+/** @inheritDoc */
+vjs.Menu.prototype.createEl = function(){
+ var contentElType = this.options().contentElType || 'ul';
+ this.contentEl_ = vjs.createEl(contentElType, {
+ className: 'vjs-menu-content'
+ });
+ var el = vjs.Component.prototype.createEl.call(this, 'div', {
+ append: this.contentEl_,
+ className: 'vjs-menu'
+ });
+ el.appendChild(this.contentEl_);
+
+ // Prevent clicks from bubbling up. Needed for Menu Buttons,
+ // where a click on the parent is significant
+ vjs.on(el, 'click', function(event){
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ });
+
+ return el;
+};
+
+/**
+ * The component for a menu item. `
`
+ *
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @class
+ * @constructor
+ */
+vjs.MenuItem = vjs.Button.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Button.call(this, player, options);
+ this.selected(options['selected']);
+ }
+});
+
+/** @inheritDoc */
+vjs.MenuItem.prototype.createEl = function(type, props){
+ return vjs.Button.prototype.createEl.call(this, 'li', vjs.obj.merge({
+ className: 'vjs-menu-item',
+ innerHTML: this.localize(this.options_['label'])
+ }, props));
+};
+
+/**
+ * Handle a click on the menu item, and set it to selected
+ */
+vjs.MenuItem.prototype.onClick = function(){
+ this.selected(true);
+};
+
+/**
+ * Set this menu item as selected or not
+ * @param {Boolean} selected
+ */
+vjs.MenuItem.prototype.selected = function(selected){
+ if (selected) {
+ this.addClass('vjs-selected');
+ this.el_.setAttribute('aria-selected',true);
+ } else {
+ this.removeClass('vjs-selected');
+ this.el_.setAttribute('aria-selected',false);
+ }
+};
+
+
+/**
+ * A button class with a popup menu
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.MenuButton = vjs.Button.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Button.call(this, player, options);
+
+ this.update();
+
+ this.on('keydown', this.onKeyPress);
+ this.el_.setAttribute('aria-haspopup', true);
+ this.el_.setAttribute('role', 'button');
+ }
+});
+
+vjs.MenuButton.prototype.update = function() {
+ var menu = this.createMenu();
+
+ if (this.menu) {
+ this.removeChild(this.menu);
+ }
+
+ this.menu = menu;
+ this.addChild(menu);
+
+ if (this.items && this.items.length === 0) {
+ this.hide();
+ } else if (this.items && this.items.length > 1) {
+ this.show();
+ }
+};
+
+/**
+ * Track the state of the menu button
+ * @type {Boolean}
+ * @private
+ */
+vjs.MenuButton.prototype.buttonPressed_ = false;
+
+vjs.MenuButton.prototype.createMenu = function(){
+ var menu = new vjs.Menu(this.player_);
+
+ // Add a title list item to the top
+ if (this.options().title) {
+ menu.contentEl().appendChild(vjs.createEl('li', {
+ className: 'vjs-menu-title',
+ innerHTML: vjs.capitalize(this.options().title),
+ tabindex: -1
+ }));
+ }
+
+ this.items = this['createItems']();
+
+ if (this.items) {
+ // Add menu items to the menu
+ for (var i = 0; i < this.items.length; i++) {
+ menu.addItem(this.items[i]);
+ }
+ }
+
+ return menu;
+};
+
+/**
+ * Create the list of menu items. Specific to each subclass.
+ */
+vjs.MenuButton.prototype.createItems = function(){};
+
+/** @inheritDoc */
+vjs.MenuButton.prototype.buildCSSClass = function(){
+ return this.className + ' vjs-menu-button ' + vjs.Button.prototype.buildCSSClass.call(this);
+};
+
+// Focus - Add keyboard functionality to element
+// This function is not needed anymore. Instead, the keyboard functionality is handled by
+// treating the button as triggering a submenu. When the button is pressed, the submenu
+// appears. Pressing the button again makes the submenu disappear.
+vjs.MenuButton.prototype.onFocus = function(){};
+// Can't turn off list display that we turned on with focus, because list would go away.
+vjs.MenuButton.prototype.onBlur = function(){};
+
+vjs.MenuButton.prototype.onClick = function(){
+ // When you click the button it adds focus, which will show the menu indefinitely.
+ // So we'll remove focus when the mouse leaves the button.
+ // Focus is needed for tab navigation.
+ this.one('mouseout', vjs.bind(this, function(){
+ this.menu.unlockShowing();
+ this.el_.blur();
+ }));
+ if (this.buttonPressed_){
+ this.unpressButton();
+ } else {
+ this.pressButton();
+ }
+};
+
+vjs.MenuButton.prototype.onKeyPress = function(event){
+
+ // Check for space bar (32) or enter (13) keys
+ if (event.which == 32 || event.which == 13) {
+ if (this.buttonPressed_){
+ this.unpressButton();
+ } else {
+ this.pressButton();
+ }
+ event.preventDefault();
+ // Check for escape (27) key
+ } else if (event.which == 27){
+ if (this.buttonPressed_){
+ this.unpressButton();
+ }
+ event.preventDefault();
+ }
+};
+
+vjs.MenuButton.prototype.pressButton = function(){
+ this.buttonPressed_ = true;
+ this.menu.lockShowing();
+ this.el_.setAttribute('aria-pressed', true);
+ if (this.items && this.items.length > 0) {
+ this.items[0].el().focus(); // set the focus to the title of the submenu
+ }
+};
+
+vjs.MenuButton.prototype.unpressButton = function(){
+ this.buttonPressed_ = false;
+ this.menu.unlockShowing();
+ this.el_.setAttribute('aria-pressed', false);
+};
+/**
+ * Custom MediaError to mimic the HTML5 MediaError
+ * @param {Number} code The media error code
+ */
+vjs.MediaError = function(code){
+ if (typeof code === 'number') {
+ this.code = code;
+ } else if (typeof code === 'string') {
+ // default code is zero, so this is a custom error
+ this.message = code;
+ } else if (typeof code === 'object') { // object
+ vjs.obj.merge(this, code);
+ }
+
+ if (!this.message) {
+ this.message = vjs.MediaError.defaultMessages[this.code] || '';
+ }
+};
+
+/**
+ * The error code that refers two one of the defined
+ * MediaError types
+ * @type {Number}
+ */
+vjs.MediaError.prototype.code = 0;
+
+/**
+ * An optional message to be shown with the error.
+ * Message is not part of the HTML5 video spec
+ * but allows for more informative custom errors.
+ * @type {String}
+ */
+vjs.MediaError.prototype.message = '';
+
+/**
+ * An optional status code that can be set by plugins
+ * to allow even more detail about the error.
+ * For example the HLS plugin might provide the specific
+ * HTTP status code that was returned when the error
+ * occurred, then allowing a custom error overlay
+ * to display more information.
+ * @type {[type]}
+ */
+vjs.MediaError.prototype.status = null;
+
+vjs.MediaError.errorTypes = [
+ 'MEDIA_ERR_CUSTOM', // = 0
+ 'MEDIA_ERR_ABORTED', // = 1
+ 'MEDIA_ERR_NETWORK', // = 2
+ 'MEDIA_ERR_DECODE', // = 3
+ 'MEDIA_ERR_SRC_NOT_SUPPORTED', // = 4
+ 'MEDIA_ERR_ENCRYPTED' // = 5
+];
+
+vjs.MediaError.defaultMessages = {
+ 1: 'You aborted the video playback',
+ 2: 'A network error caused the video download to fail part-way.',
+ 3: 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support.',
+ 4: 'The video could not be loaded, either because the server or network failed or because the format is not supported.',
+ 5: 'The video is encrypted and we do not have the keys to decrypt it.'
+};
+
+// Add types as properties on MediaError
+// e.g. MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+for (var errNum = 0; errNum < vjs.MediaError.errorTypes.length; errNum++) {
+ vjs.MediaError[vjs.MediaError.errorTypes[errNum]] = errNum;
+ // values should be accessible on both the class and instance
+ vjs.MediaError.prototype[vjs.MediaError.errorTypes[errNum]] = errNum;
+}
+(function(){
+ var apiMap, specApi, browserApi, i;
+
+ /**
+ * Store the browser-specific methods for the fullscreen API
+ * @type {Object|undefined}
+ * @private
+ */
+ vjs.browser.fullscreenAPI;
+
+ // browser API methods
+ // map approach from Screenful.js - https://github.com/sindresorhus/screenfull.js
+ apiMap = [
+ // Spec: https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
+ [
+ 'requestFullscreen',
+ 'exitFullscreen',
+ 'fullscreenElement',
+ 'fullscreenEnabled',
+ 'fullscreenchange',
+ 'fullscreenerror'
+ ],
+ // WebKit
+ [
+ 'webkitRequestFullscreen',
+ 'webkitExitFullscreen',
+ 'webkitFullscreenElement',
+ 'webkitFullscreenEnabled',
+ 'webkitfullscreenchange',
+ 'webkitfullscreenerror'
+ ],
+ // Old WebKit (Safari 5.1)
+ [
+ 'webkitRequestFullScreen',
+ 'webkitCancelFullScreen',
+ 'webkitCurrentFullScreenElement',
+ 'webkitCancelFullScreen',
+ 'webkitfullscreenchange',
+ 'webkitfullscreenerror'
+ ],
+ // Mozilla
+ [
+ 'mozRequestFullScreen',
+ 'mozCancelFullScreen',
+ 'mozFullScreenElement',
+ 'mozFullScreenEnabled',
+ 'mozfullscreenchange',
+ 'mozfullscreenerror'
+ ],
+ // Microsoft
+ [
+ 'msRequestFullscreen',
+ 'msExitFullscreen',
+ 'msFullscreenElement',
+ 'msFullscreenEnabled',
+ 'MSFullscreenChange',
+ 'MSFullscreenError'
+ ]
+ ];
+
+ specApi = apiMap[0];
+
+ // determine the supported set of functions
+ for (i=0; i
+ *
+ *
+ * ```
+ *
+ * After an instance has been created it can be accessed globally using `Video('example_video_1')`.
+ *
+ * @class
+ * @extends vjs.Component
+ */
+vjs.Player = vjs.Component.extend({
+
+ /**
+ * player's constructor function
+ *
+ * @constructs
+ * @method init
+ * @param {Element} tag The original video tag used for configuring options
+ * @param {Object=} options Player options
+ * @param {Function=} ready Ready callback function
+ */
+ init: function(tag, options, ready){
+ this.tag = tag; // Store the original tag used to set options
+
+ // Make sure tag ID exists
+ tag.id = tag.id || 'vjs_video_' + vjs.guid++;
+
+ // Store the tag attributes used to restore html5 element
+ this.tagAttributes = tag && vjs.getElementAttributes(tag);
+
+ // Set Options
+ // The options argument overrides options set in the video tag
+ // which overrides globally set options.
+ // This latter part coincides with the load order
+ // (tag must exist before Player)
+ options = vjs.obj.merge(this.getTagSettings(tag), options);
+
+ // Update Current Language
+ this.language_ = options['language'] || vjs.options['language'];
+
+ // Update Supported Languages
+ this.languages_ = options['languages'] || vjs.options['languages'];
+
+ // Cache for video property values.
+ this.cache_ = {};
+
+ // Set poster
+ this.poster_ = options['poster'] || '';
+
+ // Set controls
+ this.controls_ = !!options['controls'];
+ // Original tag settings stored in options
+ // now remove immediately so native controls don't flash.
+ // May be turned back on by HTML5 tech if nativeControlsForTouch is true
+ tag.controls = false;
+
+ // we don't want the player to report touch activity on itself
+ // see enableTouchActivity in Component
+ options.reportTouchActivity = false;
+
+ // Set isAudio based on whether or not an audio tag was used
+ this.isAudio(this.tag.nodeName.toLowerCase() === 'audio');
+
+ // Run base component initializing with new options.
+ // Builds the element through createEl()
+ // Inits and embeds any child components in opts
+ vjs.Component.call(this, this, options, ready);
+
+ // Update controls className. Can't do this when the controls are initially
+ // set because the element doesn't exist yet.
+ if (this.controls()) {
+ this.addClass('vjs-controls-enabled');
+ } else {
+ this.addClass('vjs-controls-disabled');
+ }
+
+ if (this.isAudio()) {
+ this.addClass('vjs-audio');
+ }
+
+ // TODO: Make this smarter. Toggle user state between touching/mousing
+ // using events, since devices can have both touch and mouse events.
+ // if (vjs.TOUCH_ENABLED) {
+ // this.addClass('vjs-touch-enabled');
+ // }
+
+ // Make player easily findable by ID
+ vjs.players[this.id_] = this;
+
+ if (options['plugins']) {
+ vjs.obj.each(options['plugins'], function(key, val){
+ this[key](val);
+ }, this);
+ }
+
+ this.listenForUserActivity();
+ }
+});
+
+/**
+ * The player's stored language code
+ *
+ * @type {String}
+ * @private
+ */
+vjs.Player.prototype.language_;
+
+/**
+ * The player's language code
+ * @param {String} languageCode The locale string
+ * @return {String} The locale string when getting
+ * @return {vjs.Player} self, when setting
+ */
+vjs.Player.prototype.language = function (languageCode) {
+ if (languageCode === undefined) {
+ return this.language_;
+ }
+
+ this.language_ = languageCode;
+ return this;
+};
+
+/**
+ * The player's stored language dictionary
+ *
+ * @type {Object}
+ * @private
+ */
+vjs.Player.prototype.languages_;
+
+vjs.Player.prototype.languages = function(){
+ return this.languages_;
+};
+
+/**
+ * Player instance options, surfaced using vjs.options
+ * vjs.options = vjs.Player.prototype.options_
+ * Make changes in vjs.options, not here.
+ * All options should use string keys so they avoid
+ * renaming by closure compiler
+ * @type {Object}
+ * @private
+ */
+vjs.Player.prototype.options_ = vjs.options;
+
+/**
+ * Destroys the video player and does any necessary cleanup
+ *
+ * myPlayer.dispose();
+ *
+ * This is especially helpful if you are dynamically adding and removing videos
+ * to/from the DOM.
+ */
+vjs.Player.prototype.dispose = function(){
+ this.trigger('dispose');
+ // prevent dispose from being called twice
+ this.off('dispose');
+
+ // Kill reference to this player
+ vjs.players[this.id_] = null;
+ if (this.tag && this.tag['player']) { this.tag['player'] = null; }
+ if (this.el_ && this.el_['player']) { this.el_['player'] = null; }
+
+ if (this.tech) { this.tech.dispose(); }
+
+ // Component dispose
+ vjs.Component.prototype.dispose.call(this);
+};
+
+vjs.Player.prototype.getTagSettings = function(tag){
+ var tagOptions,
+ dataSetup,
+ options = {
+ 'sources': [],
+ 'tracks': []
+ };
+
+ tagOptions = vjs.getElementAttributes(tag);
+ dataSetup = tagOptions['data-setup'];
+
+ // Check if data-setup attr exists.
+ if (dataSetup !== null){
+ // Parse options JSON
+ // If empty string, make it a parsable json object.
+ vjs.obj.merge(tagOptions, vjs.JSON.parse(dataSetup || '{}'));
+ }
+
+ vjs.obj.merge(options, tagOptions);
+
+ // Get tag children settings
+ if (tag.hasChildNodes()) {
+ var children, child, childName, i, j;
+
+ children = tag.childNodes;
+
+ for (i=0,j=children.length; i 0) {
+ techOptions['startTime'] = this.cache_.currentTime;
+ }
+
+ this.cache_.src = source.src;
+ }
+
+ // Initialize tech instance
+ this.tech = new window['videojs'][techName](this, techOptions);
+
+ this.tech.ready(techReady);
+};
+
+vjs.Player.prototype.unloadTech = function(){
+ this.isReady_ = false;
+
+ this.tech.dispose();
+
+ 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){
+// vjs.log('unloadingTech')
+// this.unloadTech();
+// vjs.log('unloadedTech')
+// if (betweenFn) { betweenFn.call(); }
+// vjs.log('LoadingTech')
+// this.loadTech(this.techName, { src: this.cache_.src })
+// vjs.log('loadedTech')
+// },
+
+// /* Player event handlers (how the player reacts to certain events)
+// ================================================================================ */
+
+/**
+ * Fired when the user agent begins looking for media data
+ * @event loadstart
+ */
+vjs.Player.prototype.onLoadStart = function() {
+ // TODO: Update to use `emptied` event instead. See #1277.
+
+ this.removeClass('vjs-ended');
+
+ // reset the error state
+ this.error(null);
+
+ // If it's already playing we want to trigger a firstplay event now.
+ // The firstplay event relies on both the play and loadstart events
+ // which can happen in any order for a new source
+ if (!this.paused()) {
+ this.trigger('firstplay');
+ } else {
+ // reset the hasStarted state
+ this.hasStarted(false);
+ }
+};
+
+vjs.Player.prototype.hasStarted_ = false;
+
+vjs.Player.prototype.hasStarted = function(hasStarted){
+ if (hasStarted !== undefined) {
+ // only update if this is a new value
+ if (this.hasStarted_ !== hasStarted) {
+ this.hasStarted_ = hasStarted;
+ if (hasStarted) {
+ this.addClass('vjs-has-started');
+ // trigger the firstplay event if this newly has played
+ this.trigger('firstplay');
+ } else {
+ this.removeClass('vjs-has-started');
+ }
+ }
+ return this;
+ }
+ return this.hasStarted_;
+};
+
+/**
+ * Fired when the player has initial duration and dimension information
+ * @event loadedmetadata
+ */
+vjs.Player.prototype.onLoadedMetaData;
+
+/**
+ * Fired when the player has downloaded data at the current playback position
+ * @event loadeddata
+ */
+vjs.Player.prototype.onLoadedData;
+
+/**
+ * Fired when the player has finished downloading the source data
+ * @event loadedalldata
+ */
+vjs.Player.prototype.onLoadedAllData;
+
+/**
+ * Fired whenever the media begins or resumes playback
+ * @event play
+ */
+vjs.Player.prototype.onPlay = function(){
+ this.removeClass('vjs-ended');
+ this.removeClass('vjs-paused');
+ this.addClass('vjs-playing');
+
+ // hide the poster when the user hits play
+ // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play
+ this.hasStarted(true);
+};
+
+/**
+ * Fired whenever the media begins waiting
+ * @event waiting
+ */
+vjs.Player.prototype.onWaiting = function(){
+ this.addClass('vjs-waiting');
+};
+
+/**
+ * A handler for events that signal that waiting has ended
+ * which is not consistent between browsers. See #1351
+ * @private
+ */
+vjs.Player.prototype.onWaitEnd = function(){
+ this.removeClass('vjs-waiting');
+};
+
+/**
+ * Fired whenever the player is jumping to a new time
+ * @event seeking
+ */
+vjs.Player.prototype.onSeeking = function(){
+ this.addClass('vjs-seeking');
+};
+
+/**
+ * Fired when the player has finished jumping to a new time
+ * @event seeked
+ */
+vjs.Player.prototype.onSeeked = function(){
+ this.removeClass('vjs-seeking');
+};
+
+/**
+ * Fired the first time a video is played
+ *
+ * Not part of the HLS spec, and we're not sure if this is the best
+ * implementation yet, so use sparingly. If you don't have a reason to
+ * prevent playback, use `myPlayer.one('play');` instead.
+ *
+ * @event firstplay
+ */
+vjs.Player.prototype.onFirstPlay = function(){
+ //If the first starttime attribute is specified
+ //then we will start at the given offset in seconds
+ if(this.options_['starttime']){
+ this.currentTime(this.options_['starttime']);
+ }
+
+ this.addClass('vjs-has-started');
+};
+
+/**
+ * Fired whenever the media has been paused
+ * @event pause
+ */
+vjs.Player.prototype.onPause = function(){
+ this.removeClass('vjs-playing');
+ this.addClass('vjs-paused');
+};
+
+/**
+ * Fired when the current playback position has changed
+ *
+ * During playback this is fired every 15-250 milliseconds, depending on the
+ * playback technology in use.
+ * @event timeupdate
+ */
+vjs.Player.prototype.onTimeUpdate;
+
+/**
+ * Fired while the user agent is downloading media data
+ * @event progress
+ */
+vjs.Player.prototype.onProgress = function(){
+ // Add custom event for when source is finished downloading.
+ if (this.bufferedPercent() == 1) {
+ this.trigger('loadedalldata');
+ }
+};
+
+/**
+ * Fired when the end of the media resource is reached (currentTime == duration)
+ * @event ended
+ */
+vjs.Player.prototype.onEnded = function(){
+ this.addClass('vjs-ended');
+ if (this.options_['loop']) {
+ this.currentTime(0);
+ this.play();
+ } else if (!this.paused()) {
+ this.pause();
+ }
+};
+
+/**
+ * Fired when the duration of the media resource is first known or changed
+ * @event durationchange
+ */
+vjs.Player.prototype.onDurationChange = function(){
+ // Allows for caching value instead of asking player each time.
+ // We need to get the techGet response and check for a value so we don't
+ // accidentally cause the stack to blow up.
+ var duration = this.techGet('duration');
+ if (duration) {
+ if (duration < 0) {
+ duration = Infinity;
+ }
+ this.duration(duration);
+ // Determine if the stream is live and propagate styles down to UI.
+ if (duration === Infinity) {
+ this.addClass('vjs-live');
+ } else {
+ this.removeClass('vjs-live');
+ }
+ }
+};
+
+/**
+ * Fired when the volume changes
+ * @event volumechange
+ */
+vjs.Player.prototype.onVolumeChange;
+
+/**
+ * Fired when the player switches in or out of fullscreen mode
+ * @event fullscreenchange
+ */
+vjs.Player.prototype.onFullscreenChange = function() {
+ if (this.isFullscreen()) {
+ this.addClass('vjs-fullscreen');
+ } else {
+ this.removeClass('vjs-fullscreen');
+ }
+};
+
+/**
+ * Fired when an error occurs
+ * @event error
+ */
+vjs.Player.prototype.onError;
+
+// /* Player API
+// ================================================================================ */
+
+/**
+ * Object for cached values.
+ * @private
+ */
+vjs.Player.prototype.cache_;
+
+vjs.Player.prototype.getCache = function(){
+ return this.cache_;
+};
+
+// Pass values to the playback tech
+vjs.Player.prototype.techCall = function(method, arg){
+ // If it's not ready yet, call method when it is
+ if (this.tech && !this.tech.isReady_) {
+ this.tech.ready(function(){
+ this[method](arg);
+ });
+
+ // Otherwise call method now
+ } else {
+ try {
+ this.tech[method](arg);
+ } catch(e) {
+ vjs.log(e);
+ throw e;
+ }
+ }
+};
+
+// Get calls can't wait for the tech, and sometimes don't need to.
+vjs.Player.prototype.techGet = function(method){
+ if (this.tech && 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) {
+ vjs.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') {
+ vjs.log('Video.js: ' + method + ' unavailable on '+this.techName+' playback technology element.', e);
+ this.tech.isReady_ = false;
+ } else {
+ vjs.log(e);
+ }
+ }
+ throw e;
+ }
+ }
+
+ return;
+};
+
+/**
+ * start media playback
+ *
+ * myPlayer.play();
+ *
+ * @return {vjs.Player} self
+ */
+vjs.Player.prototype.play = function(){
+ this.techCall('play');
+ return this;
+};
+
+/**
+ * Pause the video playback
+ *
+ * myPlayer.pause();
+ *
+ * @return {vjs.Player} self
+ */
+vjs.Player.prototype.pause = function(){
+ this.techCall('pause');
+ return this;
+};
+
+/**
+ * Check if the player is paused
+ *
+ * var isPaused = myPlayer.paused();
+ * var isPlaying = !myPlayer.paused();
+ *
+ * @return {Boolean} false if the media is currently playing, or true otherwise
+ */
+vjs.Player.prototype.paused = function(){
+ // The initial state of paused should be true (in Safari it's actually false)
+ return (this.techGet('paused') === false) ? false : true;
+};
+
+/**
+ * Get or set the current time (in seconds)
+ *
+ * // get
+ * var whereYouAt = myPlayer.currentTime();
+ *
+ * // set
+ * myPlayer.currentTime(120); // 2 minutes into the video
+ *
+ * @param {Number|String=} seconds The time to seek to
+ * @return {Number} The time in seconds, when not setting
+ * @return {vjs.Player} self, when the current time is set
+ */
+vjs.Player.prototype.currentTime = function(seconds){
+ if (seconds !== undefined) {
+
+ this.techCall('setCurrentTime', seconds);
+
+ return this;
+ }
+
+ // cache last currentTime and return. default to 0 seconds
+ //
+ // Caching the currentTime is meant to prevent a massive amount of reads on the tech's
+ // currentTime when scrubbing, but may not provide much performance benefit afterall.
+ // Should be tested. Also something has to read the actual current time or the cache will
+ // never get updated.
+ return this.cache_.currentTime = (this.techGet('currentTime') || 0);
+};
+
+/**
+ * Get the length in time of the video in seconds
+ *
+ * var lengthOfVideo = myPlayer.duration();
+ *
+ * **NOTE**: The video must have started loading before the duration can be
+ * known, and in the case of Flash, may not be known until the video starts
+ * playing.
+ *
+ * @return {Number} The duration of the video in seconds
+ */
+vjs.Player.prototype.duration = function(seconds){
+ if (seconds !== undefined) {
+
+ // cache the last set value for optimized scrubbing (esp. Flash)
+ this.cache_.duration = parseFloat(seconds);
+
+ return this;
+ }
+
+ if (this.cache_.duration === undefined) {
+ this.onDurationChange();
+ }
+
+ return this.cache_.duration || 0;
+};
+
+/**
+ * Calculates how much time is left.
+ *
+ * var timeLeft = myPlayer.remainingTime();
+ *
+ * Not a native video element function, but useful
+ * @return {Number} The time remaining in seconds
+ */
+vjs.Player.prototype.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.
+
+/**
+ * Get a TimeRange object with the times of the video that have been downloaded
+ *
+ * If you just want the percent of the video that's been downloaded,
+ * use bufferedPercent.
+ *
+ * // Number of different ranges of time have been buffered. Usually 1.
+ * numberOfRanges = bufferedTimeRange.length,
+ *
+ * // Time in seconds when the first range starts. Usually 0.
+ * firstRangeStart = bufferedTimeRange.start(0),
+ *
+ * // Time in seconds when the first range ends
+ * firstRangeEnd = bufferedTimeRange.end(0),
+ *
+ * // Length in seconds of the first time range
+ * firstRangeLength = firstRangeEnd - firstRangeStart;
+ *
+ * @return {Object} A mock TimeRange object (following HTML spec)
+ */
+vjs.Player.prototype.buffered = function(){
+ var buffered = this.techGet('buffered');
+
+ if (!buffered || !buffered.length) {
+ buffered = vjs.createTimeRange(0,0);
+ }
+
+ return buffered;
+};
+
+/**
+ * Get the percent (as a decimal) of the video that's been downloaded
+ *
+ * var howMuchIsDownloaded = myPlayer.bufferedPercent();
+ *
+ * 0 means none, 1 means all.
+ * (This method isn't in the HTML5 spec, but it's very convenient)
+ *
+ * @return {Number} A decimal between 0 and 1 representing the percent
+ */
+vjs.Player.prototype.bufferedPercent = function(){
+ var duration = this.duration(),
+ buffered = this.buffered(),
+ bufferedDuration = 0,
+ start, end;
+
+ if (!duration) {
+ return 0;
+ }
+
+ for (var i=0; i duration) {
+ end = duration;
+ }
+
+ bufferedDuration += end - start;
+ }
+
+ return bufferedDuration / duration;
+};
+
+/**
+ * Get the ending time of the last buffered time range
+ *
+ * This is used in the progress bar to encapsulate all time ranges.
+ * @return {Number} The end of the last buffered time range
+ */
+vjs.Player.prototype.bufferedEnd = function(){
+ var buffered = this.buffered(),
+ duration = this.duration(),
+ end = buffered.end(buffered.length-1);
+
+ if (end > duration) {
+ end = duration;
+ }
+
+ return end;
+};
+
+/**
+ * Get or set the current volume of the media
+ *
+ * // get
+ * var howLoudIsIt = myPlayer.volume();
+ *
+ * // set
+ * myPlayer.volume(0.5); // Set volume to half
+ *
+ * 0 is off (muted), 1.0 is all the way up, 0.5 is half way.
+ *
+ * @param {Number} percentAsDecimal The new volume as a decimal percent
+ * @return {Number} The current volume, when getting
+ * @return {vjs.Player} self, when setting
+ */
+vjs.Player.prototype.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.cache_.volume = vol;
+ this.techCall('setVolume', vol);
+ vjs.setLocalStorage('volume', vol);
+ return this;
+ }
+
+ // Default to 1 when returning current volume.
+ vol = parseFloat(this.techGet('volume'));
+ return (isNaN(vol)) ? 1 : vol;
+};
+
+
+/**
+ * Get the current muted state, or turn mute on or off
+ *
+ * // get
+ * var isVolumeMuted = myPlayer.muted();
+ *
+ * // set
+ * myPlayer.muted(true); // mute the volume
+ *
+ * @param {Boolean=} muted True to mute, false to unmute
+ * @return {Boolean} True if mute is on, false if not, when getting
+ * @return {vjs.Player} self, when setting mute
+ */
+vjs.Player.prototype.muted = function(muted){
+ if (muted !== undefined) {
+ this.techCall('setMuted', muted);
+ return this;
+ }
+ return this.techGet('muted') || false; // Default to false
+};
+
+// Check if current tech can support native fullscreen
+// (e.g. with built in controls like iOS, so not our flash swf)
+vjs.Player.prototype.supportsFullScreen = function(){
+ return this.techGet('supportsFullScreen') || false;
+};
+
+/**
+ * is the player in fullscreen
+ * @type {Boolean}
+ * @private
+ */
+vjs.Player.prototype.isFullscreen_ = false;
+
+/**
+ * Check if the player is in fullscreen mode
+ *
+ * // get
+ * var fullscreenOrNot = myPlayer.isFullscreen();
+ *
+ * // set
+ * myPlayer.isFullscreen(true); // tell the player it's in fullscreen
+ *
+ * NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official
+ * property and instead document.fullscreenElement is used. But isFullscreen is
+ * still a valuable property for internal player workings.
+ *
+ * @param {Boolean=} isFS Update the player's fullscreen state
+ * @return {Boolean} true if fullscreen, false if not
+ * @return {vjs.Player} self, when setting
+ */
+vjs.Player.prototype.isFullscreen = function(isFS){
+ if (isFS !== undefined) {
+ this.isFullscreen_ = !!isFS;
+ return this;
+ }
+ return this.isFullscreen_;
+};
+
+/**
+ * Old naming for isFullscreen()
+ * @deprecated for lowercase 's' version
+ */
+vjs.Player.prototype.isFullScreen = function(isFS){
+ vjs.log.warn('player.isFullScreen() has been deprecated, use player.isFullscreen() with a lowercase "s")');
+ return this.isFullscreen(isFS);
+};
+
+/**
+ * Increase the size of the video to full screen
+ *
+ * myPlayer.requestFullscreen();
+ *
+ * In some browsers, full screen is not supported natively, so it enters
+ * "full window mode", where the video fills the browser window.
+ * In browsers and devices that support native full screen, sometimes the
+ * browser's default controls will be shown, and not the Video.js custom skin.
+ * This includes most mobile devices (iOS, Android) and older versions of
+ * Safari.
+ *
+ * @return {vjs.Player} self
+ */
+vjs.Player.prototype.requestFullscreen = function(){
+ var fsApi = vjs.browser.fullscreenAPI;
+
+ this.isFullscreen(true);
+
+ if (fsApi) {
+ // the browser supports going fullscreen at the element level so we can
+ // take the controls fullscreen as well as the video
+
+ // Trigger fullscreenchange event after change
+ // We have to specifically add this each time, and remove
+ // when canceling fullscreen. Otherwise if there's multiple
+ // players on a page, they would all be reacting to the same fullscreen
+ // events
+ vjs.on(document, fsApi['fullscreenchange'], vjs.bind(this, function(e){
+ this.isFullscreen(document[fsApi.fullscreenElement]);
+
+ // If cancelling fullscreen, remove event listener.
+ if (this.isFullscreen() === false) {
+ vjs.off(document, fsApi['fullscreenchange'], arguments.callee);
+ }
+
+ this.trigger('fullscreenchange');
+ }));
+
+ this.el_[fsApi.requestFullscreen]();
+
+ } else if (this.tech.supportsFullScreen()) {
+ // we can't take the video.js controls fullscreen but we can go fullscreen
+ // with native controls
+ this.techCall('enterFullScreen');
+ } else {
+ // fullscreen isn't supported so we'll just stretch the video element to
+ // fill the viewport
+ this.enterFullWindow();
+ this.trigger('fullscreenchange');
+ }
+
+ return this;
+};
+
+/**
+ * Old naming for requestFullscreen
+ * @deprecated for lower case 's' version
+ */
+vjs.Player.prototype.requestFullScreen = function(){
+ vjs.log.warn('player.requestFullScreen() has been deprecated, use player.requestFullscreen() with a lowercase "s")');
+ return this.requestFullscreen();
+};
+
+
+/**
+ * Return the video to its normal size after having been in full screen mode
+ *
+ * myPlayer.exitFullscreen();
+ *
+ * @return {vjs.Player} self
+ */
+vjs.Player.prototype.exitFullscreen = function(){
+ var fsApi = vjs.browser.fullscreenAPI;
+ this.isFullscreen(false);
+
+ // Check for browser element fullscreen support
+ if (fsApi) {
+ document[fsApi.exitFullscreen]();
+ } else if (this.tech.supportsFullScreen()) {
+ this.techCall('exitFullScreen');
+ } else {
+ this.exitFullWindow();
+ this.trigger('fullscreenchange');
+ }
+
+ return this;
+};
+
+/**
+ * Old naming for exitFullscreen
+ * @deprecated for exitFullscreen
+ */
+vjs.Player.prototype.cancelFullScreen = function(){
+ vjs.log.warn('player.cancelFullScreen() has been deprecated, use player.exitFullscreen()');
+ return this.exitFullscreen();
+};
+
+// When fullscreen isn't supported we can stretch the video container to as wide as the browser will let us.
+vjs.Player.prototype.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
+ vjs.on(document, 'keydown', vjs.bind(this, this.fullWindowOnEscKey));
+
+ // Hide any scroll bars
+ document.documentElement.style.overflow = 'hidden';
+
+ // Apply fullscreen styles
+ vjs.addClass(document.body, 'vjs-full-window');
+
+ this.trigger('enterFullWindow');
+};
+vjs.Player.prototype.fullWindowOnEscKey = function(event){
+ if (event.keyCode === 27) {
+ if (this.isFullscreen() === true) {
+ this.exitFullscreen();
+ } else {
+ this.exitFullWindow();
+ }
+ }
+};
+
+vjs.Player.prototype.exitFullWindow = function(){
+ this.isFullWindow = false;
+ vjs.off(document, 'keydown', this.fullWindowOnEscKey);
+
+ // Unhide scroll bars.
+ document.documentElement.style.overflow = this.docOrigOverflow;
+
+ // Remove fullscreen styles
+ vjs.removeClass(document.body, 'vjs-full-window');
+
+ // Resize the box, controller, and poster to original sizes
+ // this.positionAll();
+ this.trigger('exitFullWindow');
+};
+
+vjs.Player.prototype.selectSource = function(sources){
+ // Loop through each playback technology in the options order
+ for (var i=0,j=this.options_['techOrder'];i 0) {
+ // In milliseconds, if no more activity has occurred the
+ // user will be considered inactive
+ inactivityTimeout = this.setTimeout(function () {
+ // Protect against the case where the inactivityTimeout can trigger just
+ // before the next user activity is picked up by the activityCheck loop
+ // causing a flicker
+ if (!this.userActivity_) {
+ this.userActive(false);
+ }
+ }, timeout);
+ }
+ }
+ }, 250);
+};
+
+/**
+ * Gets or sets the current playback rate.
+ * @param {Boolean} rate New playback rate to set.
+ * @return {Number} Returns the new playback rate when setting
+ * @return {Number} Returns the current playback rate when getting
+ */
+vjs.Player.prototype.playbackRate = function(rate) {
+ if (rate !== undefined) {
+ this.techCall('setPlaybackRate', rate);
+ return this;
+ }
+
+ if (this.tech && this.tech['featuresPlaybackRate']) {
+ return this.techGet('playbackRate');
+ } else {
+ return 1.0;
+ }
+
+};
+
+/**
+ * Store the current audio state
+ * @type {Boolean}
+ * @private
+ */
+vjs.Player.prototype.isAudio_ = false;
+
+/**
+ * Gets or sets the audio flag
+ *
+ * @param {Boolean} bool True signals that this is an audio player.
+ * @return {Boolean} Returns true if player is audio, false if not when getting
+ * @return {vjs.Player} Returns the player if setting
+ * @private
+ */
+vjs.Player.prototype.isAudio = function(bool) {
+ if (bool !== undefined) {
+ this.isAudio_ = !!bool;
+ return this;
+ }
+
+ return this.isAudio_;
+};
+
+/**
+ * Returns the current state of network activity for the element, from
+ * the codes in the list below.
+ * - NETWORK_EMPTY (numeric value 0)
+ * The element has not yet been initialised. All attributes are in
+ * their initial states.
+ * - NETWORK_IDLE (numeric value 1)
+ * The element's resource selection algorithm is active and has
+ * selected a resource, but it is not actually using the network at
+ * this time.
+ * - NETWORK_LOADING (numeric value 2)
+ * The user agent is actively trying to download data.
+ * - NETWORK_NO_SOURCE (numeric value 3)
+ * The element's resource selection algorithm is active, but it has
+ * not yet found a resource to use.
+ * @return {Number} the current network activity state
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states
+ */
+vjs.Player.prototype.networkState = function(){
+ return this.techGet('networkState');
+};
+
+/**
+ * Returns a value that expresses the current state of the element
+ * with respect to rendering the current playback position, from the
+ * codes in the list below.
+ * - HAVE_NOTHING (numeric value 0)
+ * No information regarding the media resource is available.
+ * - HAVE_METADATA (numeric value 1)
+ * Enough of the resource has been obtained that the duration of the
+ * resource is available.
+ * - HAVE_CURRENT_DATA (numeric value 2)
+ * Data for the immediate current playback position is available.
+ * - HAVE_FUTURE_DATA (numeric value 3)
+ * Data for the immediate current playback position is available, as
+ * well as enough data for the user agent to advance the current
+ * playback position in the direction of playback.
+ * - HAVE_ENOUGH_DATA (numeric value 4)
+ * The user agent estimates that enough data is available for
+ * playback to proceed uninterrupted.
+ * @return {Number} the current playback rendering state
+ * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate
+ */
+vjs.Player.prototype.readyState = function(){
+ return this.techGet('readyState');
+};
+
+/**
+ * Text tracks are tracks of timed text events.
+ * Captions - text displayed over the video for the hearing impaired
+ * Subtitles - text displayed over the video for those who don't understand language 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
+ */
+
+/**
+ * Get an array of associated text tracks. captions, subtitles, chapters, descriptions
+ * http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks
+ * @return {Array} Array of track objects
+ */
+vjs.Player.prototype.textTracks = function(){
+ // cannot use techGet directly because it checks to see whether the tech is ready.
+ // Flash is unlikely to be ready in time but textTracks should still work.
+ return this.tech && this.tech['textTracks']();
+};
+
+vjs.Player.prototype.remoteTextTracks = function() {
+ return this.tech && this.tech['remoteTextTracks']();
+};
+
+/**
+ * Add a text track
+ * In addition to the W3C settings we allow adding additional info through options.
+ * http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack
+ * @param {String} kind Captions, subtitles, chapters, descriptions, or metadata
+ * @param {String=} label Optional label
+ * @param {String=} language Optional language
+ */
+vjs.Player.prototype.addTextTrack = function(kind, label, language) {
+ return this.tech && this.tech['addTextTrack'](kind, label, language);
+};
+
+vjs.Player.prototype.addRemoteTextTrack = function(options) {
+ return this.tech && this.tech['addRemoteTextTrack'](options);
+};
+
+vjs.Player.prototype.removeRemoteTextTrack = function(track) {
+ this.tech && this.tech['removeRemoteTextTrack'](track);
+};
+
+// Methods to add support for
+// initialTime: function(){ return this.techCall('initialTime'); },
+// startOffsetTime: function(){ return this.techCall('startOffsetTime'); },
+// played: function(){ return this.techCall('played'); },
+// seekable: function(){ return this.techCall('seekable'); },
+// videoTracks: function(){ return this.techCall('videoTracks'); },
+// audioTracks: function(){ return this.techCall('audioTracks'); },
+// videoWidth: function(){ return this.techCall('videoWidth'); },
+// videoHeight: function(){ return this.techCall('videoHeight'); },
+// defaultPlaybackRate: function(){ return this.techCall('defaultPlaybackRate'); },
+// mediaGroup: function(){ return this.techCall('mediaGroup'); },
+// controller: function(){ return this.techCall('controller'); },
+// defaultMuted: function(){ return this.techCall('defaultMuted'); }
+
+// TODO
+// currentSrcList: the array of sources including other formats and bitrates
+// playList: array of source lists in order of playback
+/**
+ * Container of main controls
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @class
+ * @constructor
+ * @extends vjs.Component
+ */
+vjs.ControlBar = vjs.Component.extend();
+
+vjs.ControlBar.prototype.options_ = {
+ loadEvent: 'play',
+ children: {
+ 'playToggle': {},
+ 'currentTimeDisplay': {},
+ 'timeDivider': {},
+ 'durationDisplay': {},
+ 'remainingTimeDisplay': {},
+ 'liveDisplay': {},
+ 'progressControl': {},
+ 'fullscreenToggle': {},
+ 'volumeControl': {},
+ 'muteToggle': {},
+ // 'volumeMenuButton': {},
+ 'playbackRateMenuButton': {},
+ 'subtitlesButton': {},
+ 'captionsButton': {},
+ 'chaptersButton': {}
+ }
+};
+
+vjs.ControlBar.prototype.createEl = function(){
+ return vjs.createEl('div', {
+ className: 'vjs-control-bar'
+ });
+};
+/**
+ * Displays the live indicator
+ * TODO - Future make it click to snap to live
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.LiveDisplay = vjs.Component.extend({
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+ }
+});
+
+vjs.LiveDisplay.prototype.createEl = function(){
+ var el = vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-live-controls vjs-control'
+ });
+
+ this.contentEl_ = vjs.createEl('div', {
+ className: 'vjs-live-display',
+ innerHTML: '' + this.localize('Stream Type') + ' ' + this.localize('LIVE'),
+ 'aria-live': 'off'
+ });
+
+ el.appendChild(this.contentEl_);
+
+ return el;
+};
+/**
+ * Button to toggle between play and pause
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @class
+ * @constructor
+ */
+vjs.PlayToggle = vjs.Button.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Button.call(this, player, options);
+
+ this.on(player, 'play', this.onPlay);
+ this.on(player, 'pause', this.onPause);
+ }
+});
+
+vjs.PlayToggle.prototype.buttonText = 'Play';
+
+vjs.PlayToggle.prototype.buildCSSClass = function(){
+ return 'vjs-play-control ' + vjs.Button.prototype.buildCSSClass.call(this);
+};
+
+// OnClick - Toggle between play and pause
+vjs.PlayToggle.prototype.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
+vjs.PlayToggle.prototype.onPlay = function(){
+ this.removeClass('vjs-paused');
+ this.addClass('vjs-playing');
+ this.el_.children[0].children[0].innerHTML = this.localize('Pause'); // change the button text to "Pause"
+};
+
+ // OnPause - Add the vjs-paused class to the element so it can change appearance
+vjs.PlayToggle.prototype.onPause = function(){
+ this.removeClass('vjs-playing');
+ this.addClass('vjs-paused');
+ this.el_.children[0].children[0].innerHTML = this.localize('Play'); // change the button text to "Play"
+};
+/**
+ * Displays the current time
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.CurrentTimeDisplay = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ this.on(player, 'timeupdate', this.updateContent);
+ }
+});
+
+vjs.CurrentTimeDisplay.prototype.createEl = function(){
+ var el = vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-current-time vjs-time-controls vjs-control'
+ });
+
+ this.contentEl_ = vjs.createEl('div', {
+ className: 'vjs-current-time-display',
+ innerHTML: 'Current Time ' + '0:00', // label the current time for screen reader users
+ 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes
+ });
+
+ el.appendChild(this.contentEl_);
+ return el;
+};
+
+vjs.CurrentTimeDisplay.prototype.updateContent = function(){
+ // Allows for smooth scrubbing, when player can't keep up.
+ var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();
+ this.contentEl_.innerHTML = '' + this.localize('Current Time') + ' ' + vjs.formatTime(time, this.player_.duration());
+};
+
+/**
+ * Displays the duration
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.DurationDisplay = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ // this might need to be changed to 'durationchange' instead of 'timeupdate' eventually,
+ // however the durationchange event fires before this.player_.duration() is set,
+ // so the value cannot be written out using this method.
+ // Once the order of durationchange and this.player_.duration() being set is figured out,
+ // this can be updated.
+ this.on(player, 'timeupdate', this.updateContent);
+ }
+});
+
+vjs.DurationDisplay.prototype.createEl = function(){
+ var el = vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-duration vjs-time-controls vjs-control'
+ });
+
+ this.contentEl_ = vjs.createEl('div', {
+ className: 'vjs-duration-display',
+ innerHTML: '' + this.localize('Duration Time') + ' ' + '0:00', // label the duration time for screen reader users
+ 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes
+ });
+
+ el.appendChild(this.contentEl_);
+ return el;
+};
+
+vjs.DurationDisplay.prototype.updateContent = function(){
+ var duration = this.player_.duration();
+ if (duration) {
+ this.contentEl_.innerHTML = '' + this.localize('Duration Time') + ' ' + vjs.formatTime(duration); // label the duration time for screen reader users
+ }
+};
+
+/**
+ * The separator between the current time and duration
+ *
+ * Can be hidden if it's not needed in the design.
+ *
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.TimeDivider = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+ }
+});
+
+vjs.TimeDivider.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-time-divider',
+ innerHTML: '/
'
+ });
+};
+
+/**
+ * Displays the time left in the video
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.RemainingTimeDisplay = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ this.on(player, 'timeupdate', this.updateContent);
+ }
+});
+
+vjs.RemainingTimeDisplay.prototype.createEl = function(){
+ var el = vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-remaining-time vjs-time-controls vjs-control'
+ });
+
+ this.contentEl_ = vjs.createEl('div', {
+ className: 'vjs-remaining-time-display',
+ innerHTML: '' + this.localize('Remaining Time') + ' ' + '-0:00', // label the remaining time for screen reader users
+ 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes
+ });
+
+ el.appendChild(this.contentEl_);
+ return el;
+};
+
+vjs.RemainingTimeDisplay.prototype.updateContent = function(){
+ if (this.player_.duration()) {
+ this.contentEl_.innerHTML = '' + this.localize('Remaining Time') + ' ' + '-'+ vjs.formatTime(this.player_.remainingTime());
+ }
+
+ // Allows for smooth scrubbing, when player can't keep up.
+ // var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();
+ // this.contentEl_.innerHTML = vjs.formatTime(time, this.player_.duration());
+};
+/**
+ * Toggle fullscreen video
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @class
+ * @extends vjs.Button
+ */
+vjs.FullscreenToggle = vjs.Button.extend({
+ /**
+ * @constructor
+ * @memberof vjs.FullscreenToggle
+ * @instance
+ */
+ init: function(player, options){
+ vjs.Button.call(this, player, options);
+ }
+});
+
+vjs.FullscreenToggle.prototype.buttonText = 'Fullscreen';
+
+vjs.FullscreenToggle.prototype.buildCSSClass = function(){
+ return 'vjs-fullscreen-control ' + vjs.Button.prototype.buildCSSClass.call(this);
+};
+
+vjs.FullscreenToggle.prototype.onClick = function(){
+ if (!this.player_.isFullscreen()) {
+ this.player_.requestFullscreen();
+ this.controlText_.innerHTML = this.localize('Non-Fullscreen');
+ } else {
+ this.player_.exitFullscreen();
+ this.controlText_.innerHTML = this.localize('Fullscreen');
+ }
+};
+/**
+ * The Progress Control component contains the seek bar, load progress,
+ * and play progress
+ *
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.ProgressControl = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+ }
+});
+
+vjs.ProgressControl.prototype.options_ = {
+ children: {
+ 'seekBar': {}
+ }
+};
+
+vjs.ProgressControl.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-progress-control vjs-control'
+ });
+};
+
+/**
+ * Seek Bar and holder for the progress bars
+ *
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.SeekBar = vjs.Slider.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Slider.call(this, player, options);
+ this.on(player, 'timeupdate', this.updateARIAAttributes);
+ player.ready(vjs.bind(this, this.updateARIAAttributes));
+ }
+});
+
+vjs.SeekBar.prototype.options_ = {
+ children: {
+ 'loadProgressBar': {},
+ 'playProgressBar': {},
+ 'seekHandle': {}
+ },
+ 'barName': 'playProgressBar',
+ 'handleName': 'seekHandle'
+};
+
+vjs.SeekBar.prototype.playerEvent = 'timeupdate';
+
+vjs.SeekBar.prototype.createEl = function(){
+ return vjs.Slider.prototype.createEl.call(this, 'div', {
+ className: 'vjs-progress-holder',
+ 'aria-label': 'video progress bar'
+ });
+};
+
+vjs.SeekBar.prototype.updateARIAAttributes = function(){
+ // Allows for smooth scrubbing, when player can't keep up.
+ var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();
+ this.el_.setAttribute('aria-valuenow',vjs.round(this.getPercent()*100, 2)); // machine readable value of progress bar (percentage complete)
+ this.el_.setAttribute('aria-valuetext',vjs.formatTime(time, this.player_.duration())); // human readable value of progress bar (time complete)
+};
+
+vjs.SeekBar.prototype.getPercent = function(){
+ return this.player_.currentTime() / this.player_.duration();
+};
+
+vjs.SeekBar.prototype.onMouseDown = function(event){
+ vjs.Slider.prototype.onMouseDown.call(this, event);
+
+ this.player_.scrubbing = true;
+ this.player_.addClass('vjs-scrubbing');
+
+ this.videoWasPlaying = !this.player_.paused();
+ this.player_.pause();
+};
+
+vjs.SeekBar.prototype.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);
+};
+
+vjs.SeekBar.prototype.onMouseUp = function(event){
+ vjs.Slider.prototype.onMouseUp.call(this, event);
+
+ this.player_.scrubbing = false;
+ this.player_.removeClass('vjs-scrubbing');
+ if (this.videoWasPlaying) {
+ this.player_.play();
+ }
+};
+
+vjs.SeekBar.prototype.stepForward = function(){
+ this.player_.currentTime(this.player_.currentTime() + 5); // more quickly fast forward for keyboard-only users
+};
+
+vjs.SeekBar.prototype.stepBack = function(){
+ this.player_.currentTime(this.player_.currentTime() - 5); // more quickly rewind for keyboard-only users
+};
+
+/**
+ * Shows load progress
+ *
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.LoadProgressBar = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+ this.on(player, 'progress', this.update);
+ }
+});
+
+vjs.LoadProgressBar.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-load-progress',
+ innerHTML: '' + this.localize('Loaded') + ' : 0%' + this.localize('Progress') + ' : 0%' + vjs.formatTime(time, this.player_.duration()) + ' ';
+};
+/**
+ * The component for controlling the volume level
+ *
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.VolumeControl = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ // hide volume controls when they're not supported by the current tech
+ if (player.tech && player.tech['featuresVolumeControl'] === false) {
+ this.addClass('vjs-hidden');
+ }
+ this.on(player, 'loadstart', function(){
+ if (player.tech['featuresVolumeControl'] === false) {
+ this.addClass('vjs-hidden');
+ } else {
+ this.removeClass('vjs-hidden');
+ }
+ });
+ }
+});
+
+vjs.VolumeControl.prototype.options_ = {
+ children: {
+ 'volumeBar': {}
+ }
+};
+
+vjs.VolumeControl.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-volume-control vjs-control'
+ });
+};
+
+/**
+ * The bar that contains the volume level and can be clicked on to adjust the level
+ *
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.VolumeBar = vjs.Slider.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Slider.call(this, player, options);
+ this.on(player, 'volumechange', this.updateARIAAttributes);
+ player.ready(vjs.bind(this, this.updateARIAAttributes));
+ }
+});
+
+vjs.VolumeBar.prototype.updateARIAAttributes = function(){
+ // Current value of volume bar as a percentage
+ this.el_.setAttribute('aria-valuenow',vjs.round(this.player_.volume()*100, 2));
+ this.el_.setAttribute('aria-valuetext',vjs.round(this.player_.volume()*100, 2)+'%');
+};
+
+vjs.VolumeBar.prototype.options_ = {
+ children: {
+ 'volumeLevel': {},
+ 'volumeHandle': {}
+ },
+ 'barName': 'volumeLevel',
+ 'handleName': 'volumeHandle'
+};
+
+vjs.VolumeBar.prototype.playerEvent = 'volumechange';
+
+vjs.VolumeBar.prototype.createEl = function(){
+ return vjs.Slider.prototype.createEl.call(this, 'div', {
+ className: 'vjs-volume-bar',
+ 'aria-label': 'volume level'
+ });
+};
+
+vjs.VolumeBar.prototype.onMouseMove = function(event) {
+ if (this.player_.muted()) {
+ this.player_.muted(false);
+ }
+
+ this.player_.volume(this.calculateDistance(event));
+};
+
+vjs.VolumeBar.prototype.getPercent = function(){
+ if (this.player_.muted()) {
+ return 0;
+ } else {
+ return this.player_.volume();
+ }
+};
+
+vjs.VolumeBar.prototype.stepForward = function(){
+ this.player_.volume(this.player_.volume() + 0.1);
+};
+
+vjs.VolumeBar.prototype.stepBack = function(){
+ this.player_.volume(this.player_.volume() - 0.1);
+};
+
+/**
+ * Shows volume level
+ *
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.VolumeLevel = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+ }
+});
+
+vjs.VolumeLevel.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-volume-level',
+ innerHTML: '' + this.localize('Mute') + '
'
+ });
+};
+
+vjs.MuteToggle.prototype.onClick = function(){
+ this.player_.muted( this.player_.muted() ? false : true );
+};
+
+vjs.MuteToggle.prototype.update = function(){
+ 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;
+ }
+
+ // Don't rewrite the button text if the actual text doesn't change.
+ // This causes unnecessary and confusing information for screen reader users.
+ // This check is needed because this function gets called every time the volume level is changed.
+ if(this.player_.muted()){
+ if(this.el_.children[0].children[0].innerHTML!=this.localize('Unmute')){
+ this.el_.children[0].children[0].innerHTML = this.localize('Unmute'); // change the button text to "Unmute"
+ }
+ } else {
+ if(this.el_.children[0].children[0].innerHTML!=this.localize('Mute')){
+ this.el_.children[0].children[0].innerHTML = this.localize('Mute'); // change the button text to "Mute"
+ }
+ }
+
+ /* TODO improve muted icon classes */
+ for (var i = 0; i < 4; i++) {
+ vjs.removeClass(this.el_, 'vjs-vol-'+i);
+ }
+ vjs.addClass(this.el_, 'vjs-vol-'+level);
+};
+/**
+ * Menu button with a popup for showing the volume slider.
+ * @constructor
+ */
+vjs.VolumeMenuButton = vjs.MenuButton.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.MenuButton.call(this, player, options);
+
+ // Same listeners as MuteToggle
+ this.on(player, 'volumechange', this.volumeUpdate);
+
+ // hide mute toggle if the current tech doesn't support volume control
+ if (player.tech && player.tech['featuresVolumeControl'] === false) {
+ this.addClass('vjs-hidden');
+ }
+ this.on(player, 'loadstart', function(){
+ if (player.tech['featuresVolumeControl'] === false) {
+ this.addClass('vjs-hidden');
+ } else {
+ this.removeClass('vjs-hidden');
+ }
+ });
+ this.addClass('vjs-menu-button');
+ }
+});
+
+vjs.VolumeMenuButton.prototype.createMenu = function(){
+ var menu = new vjs.Menu(this.player_, {
+ contentElType: 'div'
+ });
+ var vc = new vjs.VolumeBar(this.player_, this.options_['volumeBar']);
+ vc.on('focus', function() {
+ menu.lockShowing();
+ });
+ vc.on('blur', function() {
+ menu.unlockShowing();
+ });
+ menu.addChild(vc);
+ return menu;
+};
+
+vjs.VolumeMenuButton.prototype.onClick = function(){
+ vjs.MuteToggle.prototype.onClick.call(this);
+ vjs.MenuButton.prototype.onClick.call(this);
+};
+
+vjs.VolumeMenuButton.prototype.createEl = function(){
+ return vjs.Button.prototype.createEl.call(this, 'div', {
+ className: 'vjs-volume-menu-button vjs-menu-button vjs-control',
+ innerHTML: '' + this.localize('Mute') + '
'
+ });
+};
+vjs.VolumeMenuButton.prototype.volumeUpdate = vjs.MuteToggle.prototype.update;
+/**
+ * The component for controlling the playback rate
+ *
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.PlaybackRateMenuButton = vjs.MenuButton.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.MenuButton.call(this, player, options);
+
+ this.updateVisibility();
+ this.updateLabel();
+
+ this.on(player, 'loadstart', this.updateVisibility);
+ this.on(player, 'ratechange', this.updateLabel);
+ }
+});
+
+vjs.PlaybackRateMenuButton.prototype.buttonText = 'Playback Rate';
+vjs.PlaybackRateMenuButton.prototype.className = 'vjs-playback-rate';
+
+vjs.PlaybackRateMenuButton.prototype.createEl = function(){
+ var el = vjs.MenuButton.prototype.createEl.call(this);
+
+ this.labelEl_ = vjs.createEl('div', {
+ className: 'vjs-playback-rate-value',
+ innerHTML: 1.0
+ });
+
+ el.appendChild(this.labelEl_);
+
+ return el;
+};
+
+// Menu creation
+vjs.PlaybackRateMenuButton.prototype.createMenu = function(){
+ var menu = new vjs.Menu(this.player());
+ var rates = this.player().options()['playbackRates'];
+
+ if (rates) {
+ for (var i = rates.length - 1; i >= 0; i--) {
+ menu.addChild(
+ new vjs.PlaybackRateMenuItem(this.player(), { 'rate': rates[i] + 'x'})
+ );
+ }
+ }
+
+ return menu;
+};
+
+vjs.PlaybackRateMenuButton.prototype.updateARIAAttributes = function(){
+ // Current playback rate
+ this.el().setAttribute('aria-valuenow', this.player().playbackRate());
+};
+
+vjs.PlaybackRateMenuButton.prototype.onClick = function(){
+ // select next rate option
+ var currentRate = this.player().playbackRate();
+ var rates = this.player().options()['playbackRates'];
+ // this will select first one if the last one currently selected
+ var newRate = rates[0];
+ for (var i = 0; i currentRate) {
+ newRate = rates[i];
+ break;
+ }
+ }
+ this.player().playbackRate(newRate);
+};
+
+vjs.PlaybackRateMenuButton.prototype.playbackRateSupported = function(){
+ return this.player().tech
+ && this.player().tech['featuresPlaybackRate']
+ && this.player().options()['playbackRates']
+ && this.player().options()['playbackRates'].length > 0
+ ;
+};
+
+/**
+ * Hide playback rate controls when they're no playback rate options to select
+ */
+vjs.PlaybackRateMenuButton.prototype.updateVisibility = function(){
+ if (this.playbackRateSupported()) {
+ this.removeClass('vjs-hidden');
+ } else {
+ this.addClass('vjs-hidden');
+ }
+};
+
+/**
+ * Update button label when rate changed
+ */
+vjs.PlaybackRateMenuButton.prototype.updateLabel = function(){
+ if (this.playbackRateSupported()) {
+ this.labelEl_.innerHTML = this.player().playbackRate() + 'x';
+ }
+};
+
+/**
+ * The specific menu item type for selecting a playback rate
+ *
+ * @constructor
+ */
+vjs.PlaybackRateMenuItem = vjs.MenuItem.extend({
+ contentElType: 'button',
+ /** @constructor */
+ init: function(player, options){
+ var label = this.label = options['rate'];
+ var rate = this.rate = parseFloat(label, 10);
+
+ // Modify options for parent MenuItem class's init.
+ options['label'] = label;
+ options['selected'] = rate === 1;
+ vjs.MenuItem.call(this, player, options);
+
+ this.on(player, 'ratechange', this.update);
+ }
+});
+
+vjs.PlaybackRateMenuItem.prototype.onClick = function(){
+ vjs.MenuItem.prototype.onClick.call(this);
+ this.player().playbackRate(this.rate);
+};
+
+vjs.PlaybackRateMenuItem.prototype.update = function(){
+ this.selected(this.player().playbackRate() == this.rate);
+};
+/* Poster Image
+================================================================================ */
+/**
+ * The component that handles showing the poster image.
+ *
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.PosterImage = vjs.Button.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Button.call(this, player, options);
+
+ this.update();
+ player.on('posterchange', vjs.bind(this, this.update));
+ }
+});
+
+/**
+ * Clean up the poster image
+ */
+vjs.PosterImage.prototype.dispose = function(){
+ this.player().off('posterchange', this.update);
+ vjs.Button.prototype.dispose.call(this);
+};
+
+/**
+ * Create the poster image element
+ * @return {Element}
+ */
+vjs.PosterImage.prototype.createEl = function(){
+ var el = vjs.createEl('div', {
+ className: 'vjs-poster',
+
+ // Don't want poster to be tabbable.
+ tabIndex: -1
+ });
+
+ // To ensure the poster image resizes while maintaining its original aspect
+ // ratio, use a div with `background-size` when available. For browsers that
+ // do not support `background-size` (e.g. IE8), fall back on using a regular
+ // img element.
+ if (!vjs.BACKGROUND_SIZE_SUPPORTED) {
+ this.fallbackImg_ = vjs.createEl('img');
+ el.appendChild(this.fallbackImg_);
+ }
+
+ return el;
+};
+
+/**
+ * Event handler for updates to the player's poster source
+ */
+vjs.PosterImage.prototype.update = function(){
+ var url = this.player().poster();
+
+ this.setSrc(url);
+
+ // If there's no poster source we should display:none on this component
+ // so it's not still clickable or right-clickable
+ if (url) {
+ this.show();
+ } else {
+ this.hide();
+ }
+};
+
+/**
+ * Set the poster source depending on the display method
+ */
+vjs.PosterImage.prototype.setSrc = function(url){
+ var backgroundImage;
+
+ if (this.fallbackImg_) {
+ this.fallbackImg_.src = url;
+ } else {
+ backgroundImage = '';
+ // Any falsey values should stay as an empty string, otherwise
+ // this will throw an extra error
+ if (url) {
+ backgroundImage = 'url("' + url + '")';
+ }
+
+ this.el_.style.backgroundImage = backgroundImage;
+ }
+};
+
+/**
+ * Event handler for clicks on the poster image
+ */
+vjs.PosterImage.prototype.onClick = function(){
+ // We don't want a click to trigger playback when controls are disabled
+ // but CSS should be hiding the poster to prevent that from happening
+ this.player_.play();
+};
+/* Loading Spinner
+================================================================================ */
+/**
+ * Loading spinner for waiting events
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @class
+ * @constructor
+ */
+vjs.LoadingSpinner = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ // MOVING DISPLAY HANDLING TO CSS
+
+ // player.on('canplay', vjs.bind(this, this.hide));
+ // player.on('canplaythrough', vjs.bind(this, this.hide));
+ // player.on('playing', vjs.bind(this, this.hide));
+ // player.on('seeking', vjs.bind(this, this.show));
+
+ // in some browsers seeking does not trigger the 'playing' event,
+ // so we also need to trap 'seeked' if we are going to set a
+ // 'seeking' event
+ // player.on('seeked', vjs.bind(this, this.hide));
+
+ // player.on('ended', vjs.bind(this, this.hide));
+
+ // 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', vjs.bind(this, this.show));
+
+ // player.on('waiting', vjs.bind(this, this.show));
+ }
+});
+
+vjs.LoadingSpinner.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-loading-spinner'
+ });
+};
+/* Big Play Button
+================================================================================ */
+/**
+ * Initial play button. Shows before the video has played. The hiding of the
+ * big play button is done via CSS and player states.
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @class
+ * @constructor
+ */
+vjs.BigPlayButton = vjs.Button.extend();
+
+vjs.BigPlayButton.prototype.createEl = function(){
+ return vjs.Button.prototype.createEl.call(this, 'div', {
+ className: 'vjs-big-play-button',
+ innerHTML: '= 0; i--) {
+ var attr = settingsAttrs[i];
+ var overwriteAttrs = {};
+ if (typeof player.options_[attr] !== 'undefined') {
+ overwriteAttrs[attr] = player.options_[attr];
+ }
+ vjs.setElementAttributes(el, overwriteAttrs);
+ }
+
+ return el;
+ // jenniisawesome = true;
+};
+
+
+vjs.Html5.prototype.hideCaptions = function() {
+ var tracks = this.el_.textTracks,
+ track,
+ i = tracks.length,
+ kinds = {
+ 'captions': 1,
+ 'subtitles': 1
+ };
+
+ while (i--) {
+ track = tracks[i];
+ if (track && track['kind'] in kinds) {
+ track.mode = 'disabled';
+ }
+ }
+};
+
+// Make video events trigger player events
+// May seem verbose here, but makes other APIs possible.
+// Triggers removed using this.off when disposed
+vjs.Html5.prototype.setupTriggers = function(){
+ for (var i = vjs.Html5.Events.length - 1; i >= 0; i--) {
+ this.on(vjs.Html5.Events[i], this.eventHandler);
+ }
+};
+
+vjs.Html5.prototype.eventHandler = function(evt){
+ // In the case of an error on the video element, set the error prop
+ // on the player and let the player handle triggering the event. On
+ // some platforms, error events fire that do not cause the error
+ // property on the video element to be set. See #1465 for an example.
+ if (evt.type == 'error' && this.error()) {
+ this.player().error(this.error().code);
+
+ // in some cases we pass the event directly to the player
+ } else {
+ // No need for media events to bubble up.
+ evt.bubbles = false;
+
+ this.player().trigger(evt);
+ }
+};
+
+vjs.Html5.prototype.useNativeControls = function(){
+ var tech, player, controlsOn, controlsOff, cleanUp;
+
+ tech = this;
+ player = this.player();
+
+ // If the player controls are enabled turn on the native controls
+ tech.setControls(player.controls());
+
+ // Update the native controls when player controls state is updated
+ controlsOn = function(){
+ tech.setControls(true);
+ };
+ controlsOff = function(){
+ tech.setControls(false);
+ };
+ player.on('controlsenabled', controlsOn);
+ player.on('controlsdisabled', controlsOff);
+
+ // Clean up when not using native controls anymore
+ cleanUp = function(){
+ player.off('controlsenabled', controlsOn);
+ player.off('controlsdisabled', controlsOff);
+ };
+ tech.on('dispose', cleanUp);
+ player.on('usingcustomcontrols', cleanUp);
+
+ // Update the state of the player to using native controls
+ player.usingNativeControls(true);
+};
+
+
+vjs.Html5.prototype.play = function(){ this.el_.play(); };
+vjs.Html5.prototype.pause = function(){ this.el_.pause(); };
+vjs.Html5.prototype.paused = function(){ return this.el_.paused; };
+
+vjs.Html5.prototype.currentTime = function(){ return this.el_.currentTime; };
+vjs.Html5.prototype.setCurrentTime = function(seconds){
+ try {
+ this.el_.currentTime = seconds;
+ } catch(e) {
+ vjs.log(e, 'Video is not ready. (Video.js)');
+ // this.warning(VideoJS.warnings.videoNotReady);
+ }
+};
+
+vjs.Html5.prototype.duration = function(){ return this.el_.duration || 0; };
+vjs.Html5.prototype.buffered = function(){ return this.el_.buffered; };
+
+vjs.Html5.prototype.volume = function(){ return this.el_.volume; };
+vjs.Html5.prototype.setVolume = function(percentAsDecimal){ this.el_.volume = percentAsDecimal; };
+vjs.Html5.prototype.muted = function(){ return this.el_.muted; };
+vjs.Html5.prototype.setMuted = function(muted){ this.el_.muted = muted; };
+
+vjs.Html5.prototype.width = function(){ return this.el_.offsetWidth; };
+vjs.Html5.prototype.height = function(){ return this.el_.offsetHeight; };
+
+vjs.Html5.prototype.supportsFullScreen = function(){
+ if (typeof this.el_.webkitEnterFullScreen == 'function') {
+
+ // Seems to be broken in Chromium/Chrome && Safari in Leopard
+ if (/Android/.test(vjs.USER_AGENT) || !/Chrome|Mac OS X 10.5/.test(vjs.USER_AGENT)) {
+ return true;
+ }
+ }
+ return false;
+};
+
+vjs.Html5.prototype.enterFullScreen = function(){
+ var video = this.el_;
+
+ if ('webkitDisplayingFullscreen' in video) {
+ this.one('webkitbeginfullscreen', function() {
+ this.player_.isFullscreen(true);
+
+ this.one('webkitendfullscreen', function() {
+ this.player_.isFullscreen(false);
+ this.player_.trigger('fullscreenchange');
+ });
+
+ this.player_.trigger('fullscreenchange');
+ });
+ }
+
+ if (video.paused && video.networkState <= video.HAVE_METADATA) {
+ // attempt to prime the video element for programmatic access
+ // this isn't necessary on the desktop but shouldn't hurt
+ this.el_.play();
+
+ // playing and pausing synchronously during the transition to fullscreen
+ // can get iOS ~6.1 devices into a play/pause loop
+ this.setTimeout(function(){
+ video.pause();
+ video.webkitEnterFullScreen();
+ }, 0);
+ } else {
+ video.webkitEnterFullScreen();
+ }
+};
+
+vjs.Html5.prototype.exitFullScreen = function(){
+ this.el_.webkitExitFullScreen();
+};
+
+
+vjs.Html5.prototype.src = function(src) {
+ if (src === undefined) {
+ return this.el_.src;
+ } else {
+ // Setting src through `src` instead of `setSrc` will be deprecated
+ this.setSrc(src);
+ }
+};
+
+vjs.Html5.prototype.setSrc = function(src) {
+ this.el_.src = src;
+};
+
+vjs.Html5.prototype.load = function(){ this.el_.load(); };
+vjs.Html5.prototype.currentSrc = function(){ return this.el_.currentSrc; };
+
+vjs.Html5.prototype.poster = function(){ return this.el_.poster; };
+vjs.Html5.prototype.setPoster = function(val){ this.el_.poster = val; };
+
+vjs.Html5.prototype.preload = function(){ return this.el_.preload; };
+vjs.Html5.prototype.setPreload = function(val){ this.el_.preload = val; };
+
+vjs.Html5.prototype.autoplay = function(){ return this.el_.autoplay; };
+vjs.Html5.prototype.setAutoplay = function(val){ this.el_.autoplay = val; };
+
+vjs.Html5.prototype.controls = function(){ return this.el_.controls; };
+vjs.Html5.prototype.setControls = function(val){ this.el_.controls = !!val; };
+
+vjs.Html5.prototype.loop = function(){ return this.el_.loop; };
+vjs.Html5.prototype.setLoop = function(val){ this.el_.loop = val; };
+
+vjs.Html5.prototype.error = function(){ return this.el_.error; };
+vjs.Html5.prototype.seeking = function(){ return this.el_.seeking; };
+vjs.Html5.prototype.ended = function(){ return this.el_.ended; };
+vjs.Html5.prototype.defaultMuted = function(){ return this.el_.defaultMuted; };
+
+vjs.Html5.prototype.playbackRate = function(){ return this.el_.playbackRate; };
+vjs.Html5.prototype.setPlaybackRate = function(val){ this.el_.playbackRate = val; };
+
+vjs.Html5.prototype.networkState = function(){ return this.el_.networkState; };
+vjs.Html5.prototype.readyState = function(){ return this.el_.readyState; };
+
+vjs.Html5.prototype.textTracks = function() {
+ if (!this['featuresNativeTextTracks']) {
+ return vjs.MediaTechController.prototype.textTracks.call(this);
+ }
+
+ return this.el_.textTracks;
+};
+vjs.Html5.prototype.addTextTrack = function(kind, label, language) {
+ if (!this['featuresNativeTextTracks']) {
+ return vjs.MediaTechController.prototype.addTextTrack.call(this, kind, label, language);
+ }
+
+ return this.el_.addTextTrack(kind, label, language);
+};
+
+vjs.Html5.prototype.addRemoteTextTrack = function(options) {
+ if (!this['featuresNativeTextTracks']) {
+ return vjs.MediaTechController.prototype.addRemoteTextTrack.call(this, options);
+ }
+
+ var track = document.createElement('track');
+ options = options || {};
+
+ if (options['kind']) {
+ track['kind'] = options['kind'];
+ }
+ if (options['label']) {
+ track['label'] = options['label'];
+ }
+ if (options['language'] || options['srclang']) {
+ track['srclang'] = options['language'] || options['srclang'];
+ }
+ if (options['default']) {
+ track['default'] = options['default'];
+ }
+ if (options['id']) {
+ track['id'] = options['id'];
+ }
+ if (options['src']) {
+ track['src'] = options['src'];
+ }
+
+ this.el().appendChild(track);
+
+ if (track.track['kind'] === 'metadata') {
+ track['track']['mode'] = 'hidden';
+ } else {
+ track['track']['mode'] = 'disabled';
+ }
+
+ track['onload'] = function() {
+ var tt = track['track'];
+ if (track.readyState >= 2) {
+ if (tt['kind'] === 'metadata' && tt['mode'] !== 'hidden') {
+ tt['mode'] = 'hidden';
+ } else if (tt['kind'] !== 'metadata' && tt['mode'] !== 'disabled') {
+ tt['mode'] = 'disabled';
+ }
+ track['onload'] = null;
+ }
+ };
+
+ this.remoteTextTracks().addTrack_(track.track);
+
+ return track;
+};
+
+vjs.Html5.prototype.removeRemoteTextTrack = function(track) {
+ if (!this['featuresNativeTextTracks']) {
+ return vjs.MediaTechController.prototype.removeRemoteTextTrack.call(this, track);
+ }
+
+ var tracks, i;
+
+ this.remoteTextTracks().removeTrack_(track);
+
+ tracks = this.el()['querySelectorAll']('track');
+
+ for (i = 0; i < tracks.length; i++) {
+ if (tracks[i] === track || tracks[i]['track'] === track) {
+ tracks[i]['parentNode']['removeChild'](tracks[i]);
+ break;
+ }
+ }
+};
+
+/* HTML5 Support Testing ---------------------------------------------------- */
+
+/**
+ * Check if HTML5 video is supported by this browser/device
+ * @return {Boolean}
+ */
+vjs.Html5.isSupported = function(){
+ // IE9 with no Media Player is a LIAR! (#984)
+ try {
+ vjs.TEST_VID['volume'] = 0.5;
+ } catch (e) {
+ return false;
+ }
+
+ return !!vjs.TEST_VID.canPlayType;
+};
+
+// Add Source Handler pattern functions to this tech
+vjs.MediaTechController.withSourceHandlers(vjs.Html5);
+
+/**
+ * The default native source handler.
+ * This simply passes the source to the video element. Nothing fancy.
+ * @param {Object} source The source object
+ * @param {vjs.Html5} tech The instance of the HTML5 tech
+ */
+vjs.Html5.nativeSourceHandler = {};
+
+/**
+ * Check if the video element can handle the source natively
+ * @param {Object} source The source object
+ * @return {String} 'probably', 'maybe', or '' (empty string)
+ */
+vjs.Html5.nativeSourceHandler.canHandleSource = function(source){
+ var match, ext;
+
+ function canPlayType(type){
+ // IE9 on Windows 7 without MediaPlayer throws an error here
+ // https://github.com/videojs/video.js/issues/519
+ try {
+ return vjs.TEST_VID.canPlayType(type);
+ } catch(e) {
+ return '';
+ }
+ }
+
+ // If a type was provided we should rely on that
+ if (source.type) {
+ return canPlayType(source.type);
+ } else if (source.src) {
+ // If no type, fall back to checking 'video/[EXTENSION]'
+ match = source.src.match(/\.([^.\/\?]+)(\?[^\/]+)?$/i);
+ ext = match && match[1];
+
+ return canPlayType('video/'+ext);
+ }
+
+ return '';
+};
+
+/**
+ * Pass the source to the video element
+ * Adaptive source handlers will have more complicated workflows before passing
+ * video data to the video element
+ * @param {Object} source The source object
+ * @param {vjs.Html5} tech The instance of the Html5 tech
+ */
+vjs.Html5.nativeSourceHandler.handleSource = function(source, tech){
+ tech.setSrc(source.src);
+};
+
+/**
+ * Clean up the source handler when disposing the player or switching sources..
+ * (no cleanup is needed when supporting the format natively)
+ */
+vjs.Html5.nativeSourceHandler.dispose = function(){};
+
+// Register the native source handler
+vjs.Html5.registerSourceHandler(vjs.Html5.nativeSourceHandler);
+
+/**
+ * Check if the volume can be changed in this browser/device.
+ * Volume cannot be changed in a lot of mobile devices.
+ * Specifically, it can't be changed from 1 on iOS.
+ * @return {Boolean}
+ */
+vjs.Html5.canControlVolume = function(){
+ var volume = vjs.TEST_VID.volume;
+ vjs.TEST_VID.volume = (volume / 2) + 0.1;
+ return volume !== vjs.TEST_VID.volume;
+};
+
+/**
+ * Check if playbackRate is supported in this browser/device.
+ * @return {[type]} [description]
+ */
+vjs.Html5.canControlPlaybackRate = function(){
+ var playbackRate = vjs.TEST_VID.playbackRate;
+ vjs.TEST_VID.playbackRate = (playbackRate / 2) + 0.1;
+ return playbackRate !== vjs.TEST_VID.playbackRate;
+};
+
+/**
+ * Check to see if native text tracks are supported by this browser/device
+ * @return {Boolean}
+ */
+vjs.Html5.supportsNativeTextTracks = function() {
+ var supportsTextTracks;
+
+ // Figure out native text track support
+ // If mode is a number, we cannot change it because it'll disappear from view.
+ // Browsers with numeric modes include IE10 and older (<=2013) samsung android models.
+ // Firefox isn't playing nice either with modifying the mode
+ // TODO: Investigate firefox: https://github.com/videojs/video.js/issues/1862
+ supportsTextTracks = !!vjs.TEST_VID.textTracks;
+ if (supportsTextTracks && vjs.TEST_VID.textTracks.length > 0) {
+ supportsTextTracks = typeof vjs.TEST_VID.textTracks[0]['mode'] !== 'number';
+ }
+ if (supportsTextTracks && vjs.IS_FIREFOX) {
+ supportsTextTracks = false;
+ }
+
+ return supportsTextTracks;
+};
+
+/**
+ * Set the tech's volume control support status
+ * @type {Boolean}
+ */
+vjs.Html5.prototype['featuresVolumeControl'] = vjs.Html5.canControlVolume();
+
+/**
+ * Set the tech's playbackRate support status
+ * @type {Boolean}
+ */
+vjs.Html5.prototype['featuresPlaybackRate'] = vjs.Html5.canControlPlaybackRate();
+
+/**
+ * Set the tech's status on moving the video element.
+ * In iOS, if you move a video element in the DOM, it breaks video playback.
+ * @type {Boolean}
+ */
+vjs.Html5.prototype['movingMediaElementInDOM'] = !vjs.IS_IOS;
+
+/**
+ * Set the the tech's fullscreen resize support status.
+ * HTML video is able to automatically resize when going to fullscreen.
+ * (No longer appears to be used. Can probably be removed.)
+ */
+vjs.Html5.prototype['featuresFullscreenResize'] = true;
+
+/**
+ * Set the tech's progress event support status
+ * (this disables the manual progress events of the MediaTechController)
+ */
+vjs.Html5.prototype['featuresProgressEvents'] = true;
+
+/**
+ * Sets the tech's status on native text track support
+ * @type {Boolean}
+ */
+vjs.Html5.prototype['featuresNativeTextTracks'] = vjs.Html5.supportsNativeTextTracks();
+
+// HTML5 Feature detection and Device Fixes --------------------------------- //
+(function() {
+ var canPlayType,
+ mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i,
+ mp4RE = /^video\/mp4/i;
+
+ vjs.Html5.patchCanPlayType = function() {
+ // Android 4.0 and above can play HLS to some extent but it reports being unable to do so
+ if (vjs.ANDROID_VERSION >= 4.0) {
+ if (!canPlayType) {
+ canPlayType = vjs.TEST_VID.constructor.prototype.canPlayType;
+ }
+
+ vjs.TEST_VID.constructor.prototype.canPlayType = function(type) {
+ if (type && mpegurlRE.test(type)) {
+ return 'maybe';
+ }
+ return canPlayType.call(this, type);
+ };
+ }
+
+ // Override Android 2.2 and less canPlayType method which is broken
+ if (vjs.IS_OLD_ANDROID) {
+ if (!canPlayType) {
+ canPlayType = vjs.TEST_VID.constructor.prototype.canPlayType;
+ }
+
+ vjs.TEST_VID.constructor.prototype.canPlayType = function(type){
+ if (type && mp4RE.test(type)) {
+ return 'maybe';
+ }
+ return canPlayType.call(this, type);
+ };
+ }
+ };
+
+ vjs.Html5.unpatchCanPlayType = function() {
+ var r = vjs.TEST_VID.constructor.prototype.canPlayType;
+ vjs.TEST_VID.constructor.prototype.canPlayType = canPlayType;
+ canPlayType = null;
+ return r;
+ };
+
+ // by default, patch the video element
+ vjs.Html5.patchCanPlayType();
+})();
+
+// List of all HTML5 events (various uses).
+vjs.Html5.Events = 'loadstart,suspend,abort,error,emptied,stalled,loadedmetadata,loadeddata,canplay,canplaythrough,playing,waiting,seeking,seeked,ended,durationchange,timeupdate,progress,play,pause,ratechange,volumechange'.split(',');
+
+vjs.Html5.disposeMediaElement = function(el){
+ if (!el) { return; }
+
+ el['player'] = null;
+
+ if (el.parentNode) {
+ el.parentNode.removeChild(el);
+ }
+
+ // remove any child track or source nodes to prevent their loading
+ while(el.hasChildNodes()) {
+ el.removeChild(el.firstChild);
+ }
+
+ // remove any src reference. not setting `src=''` because that causes a warning
+ // in firefox
+ el.removeAttribute('src');
+
+ // force the media element to update its loading state by calling load()
+ // however IE on Windows 7N has a bug that throws an error so need a try/catch (#793)
+ if (typeof el.load === 'function') {
+ // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+ (function() {
+ try {
+ el.load();
+ } catch (e) {
+ // not supported
+ }
+ })();
+ }
+};
+/**
+ * @fileoverview VideoJS-SWF - Custom Flash Player with HTML5-ish API
+ * https://github.com/zencoder/video-js-swf
+ * Not using setupTriggers. Using global onEvent func to distribute events
+ */
+
+/**
+ * Flash Media Controller - Wrapper for fallback SWF API
+ *
+ * @param {vjs.Player} player
+ * @param {Object=} options
+ * @param {Function=} ready
+ * @constructor
+ */
+vjs.Flash = vjs.MediaTechController.extend({
+ /** @constructor */
+ init: function(player, options, ready){
+ vjs.MediaTechController.call(this, player, options, ready);
+
+ var source = options['source'],
+
+ // Which element to embed in
+ parentEl = options['parentEl'],
+
+ // Create a temporary element to be replaced by swf object
+ placeHolder = this.el_ = vjs.createEl('div', { id: player.id() + '_temp_flash' }),
+
+ // Generate ID for swf object
+ objId = player.id()+'_flash_api',
+
+ // Store player options in local var for optimization
+ // TODO: switch to using player methods instead of options
+ // e.g. player.autoplay();
+ playerOptions = player.options_,
+
+ // Merge default flashvars with ones passed in to init
+ flashVars = vjs.obj.merge({
+
+ // SWF Callback Functions
+ 'readyFunction': 'videojs.Flash.onReady',
+ 'eventProxyFunction': 'videojs.Flash.onEvent',
+ 'errorEventProxyFunction': 'videojs.Flash.onError',
+
+ // Player Settings
+ 'autoplay': playerOptions.autoplay,
+ 'preload': playerOptions.preload,
+ 'loop': playerOptions.loop,
+ 'muted': playerOptions.muted
+
+ }, options['flashVars']),
+
+ // Merge default parames with ones passed in
+ params = vjs.obj.merge({
+ 'wmode': 'opaque', // Opaque is needed to overlay controls, but can affect playback performance
+ 'bgcolor': '#000000' // Using bgcolor prevents a white flash when the object is loading
+ }, options['params']),
+
+ // Merge default attributes with ones passed in
+ attributes = vjs.obj.merge({
+ 'id': objId,
+ 'name': objId, // Both ID and Name needed or swf to identify itself
+ 'class': 'vjs-tech'
+ }, options['attributes'])
+ ;
+
+ // If source was supplied pass as a flash var.
+ if (source) {
+ this.ready(function(){
+ this.setSource(source);
+ });
+ }
+
+ // Add placeholder to player div
+ vjs.insertFirst(placeHolder, parentEl);
+
+ // Having issues with Flash reloading on certain page actions (hide/resize/fullscreen) in certain browsers
+ // This allows resetting the playhead when we catch the reload
+ if (options['startTime']) {
+ this.ready(function(){
+ this.load();
+ this.play();
+ this['currentTime'](options['startTime']);
+ });
+ }
+
+ // firefox doesn't bubble mousemove events to parent. videojs/video-js-swf#37
+ // bugzilla bug: https://bugzilla.mozilla.org/show_bug.cgi?id=836786
+ if (vjs.IS_FIREFOX) {
+ this.ready(function(){
+ this.on('mousemove', function(){
+ // since it's a custom event, don't bubble higher than the player
+ this.player().trigger({ 'type':'mousemove', 'bubbles': false });
+ });
+ });
+ }
+
+ // native click events on the SWF aren't triggered on IE11, Win8.1RT
+ // use stageclick events triggered from inside the SWF instead
+ player.on('stageclick', player.reportUserActivity);
+
+ this.el_ = vjs.Flash.embed(options['swf'], placeHolder, flashVars, params, attributes);
+ }
+});
+
+vjs.Flash.prototype.dispose = function(){
+ vjs.MediaTechController.prototype.dispose.call(this);
+};
+
+vjs.Flash.prototype.play = function(){
+ this.el_.vjs_play();
+};
+
+vjs.Flash.prototype.pause = function(){
+ this.el_.vjs_pause();
+};
+
+vjs.Flash.prototype.src = function(src){
+ if (src === undefined) {
+ return this['currentSrc']();
+ }
+
+ // Setting src through `src` not `setSrc` will be deprecated
+ return this.setSrc(src);
+};
+
+vjs.Flash.prototype.setSrc = function(src){
+ // Make sure source URL is absolute.
+ src = vjs.getAbsoluteURL(src);
+ this.el_.vjs_src(src);
+
+ // Currently the SWF doesn't autoplay if you load a source later.
+ // e.g. Load player w/ no source, wait 2s, set src.
+ if (this.player_.autoplay()) {
+ var tech = this;
+ this.setTimeout(function(){ tech.play(); }, 0);
+ }
+};
+
+vjs.Flash.prototype['setCurrentTime'] = function(time){
+ this.lastSeekTarget_ = time;
+ this.el_.vjs_setProperty('currentTime', time);
+ vjs.MediaTechController.prototype.setCurrentTime.call(this);
+};
+
+vjs.Flash.prototype['currentTime'] = function(time){
+ // when seeking make the reported time keep up with the requested time
+ // by reading the time we're seeking to
+ if (this.seeking()) {
+ return this.lastSeekTarget_ || 0;
+ }
+ return this.el_.vjs_getProperty('currentTime');
+};
+
+vjs.Flash.prototype['currentSrc'] = function(){
+ if (this.currentSource_) {
+ return this.currentSource_.src;
+ } else {
+ return this.el_.vjs_getProperty('currentSrc');
+ }
+};
+
+vjs.Flash.prototype.load = function(){
+ this.el_.vjs_load();
+};
+
+vjs.Flash.prototype.poster = function(){
+ this.el_.vjs_getProperty('poster');
+};
+vjs.Flash.prototype['setPoster'] = function(){
+ // poster images are not handled by the Flash tech so make this a no-op
+};
+
+vjs.Flash.prototype.buffered = function(){
+ return vjs.createTimeRange(0, this.el_.vjs_getProperty('buffered'));
+};
+
+vjs.Flash.prototype.supportsFullScreen = function(){
+ return false; // Flash does not allow fullscreen through javascript
+};
+
+vjs.Flash.prototype.enterFullScreen = function(){
+ return false;
+};
+
+(function(){
+ // Create setters and getters for attributes
+ var api = vjs.Flash.prototype,
+ readWrite = 'rtmpConnection,rtmpStream,preload,defaultPlaybackRate,playbackRate,autoplay,loop,mediaGroup,controller,controls,volume,muted,defaultMuted'.split(','),
+ readOnly = 'error,networkState,readyState,seeking,initialTime,duration,startOffsetTime,paused,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight'.split(','),
+ // Overridden: buffered, currentTime, currentSrc
+ i;
+
+ function createSetter(attr){
+ var attrUpper = attr.charAt(0).toUpperCase() + attr.slice(1);
+ api['set'+attrUpper] = function(val){ return this.el_.vjs_setProperty(attr, val); };
+ }
+ function createGetter(attr) {
+ api[attr] = function(){ return this.el_.vjs_getProperty(attr); };
+ }
+
+ // Create getter and setters for all read/write attributes
+ for (i = 0; i < readWrite.length; i++) {
+ createGetter(readWrite[i]);
+ createSetter(readWrite[i]);
+ }
+
+ // Create getters for read-only attributes
+ for (i = 0; i < readOnly.length; i++) {
+ createGetter(readOnly[i]);
+ }
+})();
+
+/* Flash Support Testing -------------------------------------------------------- */
+
+vjs.Flash.isSupported = function(){
+ return vjs.Flash.version()[0] >= 10;
+ // return swfobject.hasFlashPlayerVersion('10');
+};
+
+// Add Source Handler pattern functions to this tech
+vjs.MediaTechController.withSourceHandlers(vjs.Flash);
+
+/**
+ * The default native source handler.
+ * This simply passes the source to the video element. Nothing fancy.
+ * @param {Object} source The source object
+ * @param {vjs.Flash} tech The instance of the Flash tech
+ */
+vjs.Flash.nativeSourceHandler = {};
+
+/**
+ * Check Flash can handle the source natively
+ * @param {Object} source The source object
+ * @return {String} 'probably', 'maybe', or '' (empty string)
+ */
+vjs.Flash.nativeSourceHandler.canHandleSource = function(source){
+ var type;
+
+ if (!source.type) {
+ return '';
+ }
+
+ // Strip code information from the type because we don't get that specific
+ type = source.type.replace(/;.*/,'').toLowerCase();
+
+ if (type in vjs.Flash.formats) {
+ return 'maybe';
+ }
+
+ return '';
+};
+
+/**
+ * Pass the source to the flash object
+ * Adaptive source handlers will have more complicated workflows before passing
+ * video data to the video element
+ * @param {Object} source The source object
+ * @param {vjs.Flash} tech The instance of the Flash tech
+ */
+vjs.Flash.nativeSourceHandler.handleSource = function(source, tech){
+ tech.setSrc(source.src);
+};
+
+/**
+ * Clean up the source handler when disposing the player or switching sources..
+ * (no cleanup is needed when supporting the format natively)
+ */
+vjs.Flash.nativeSourceHandler.dispose = function(){};
+
+// Register the native source handler
+vjs.Flash.registerSourceHandler(vjs.Flash.nativeSourceHandler);
+
+vjs.Flash.formats = {
+ 'video/flv': 'FLV',
+ 'video/x-flv': 'FLV',
+ 'video/mp4': 'MP4',
+ 'video/m4v': 'MP4'
+};
+
+vjs.Flash['onReady'] = function(currSwf){
+ var el, player;
+
+ el = vjs.el(currSwf);
+
+ // get player from the player div property
+ player = el && el.parentNode && el.parentNode['player'];
+
+ // if there is no el or player then the tech has been disposed
+ // and the tech element was removed from the player div
+ if (player) {
+ // reference player on tech element
+ el['player'] = player;
+ // check that the flash object is really ready
+ vjs.Flash['checkReady'](player.tech);
+ }
+};
+
+// The SWF isn't always 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.
+vjs.Flash['checkReady'] = function(tech){
+ // stop worrying if the tech has been disposed
+ if (!tech.el()) {
+ return;
+ }
+
+ // check if API property exists
+ if (tech.el().vjs_getProperty) {
+ // tell tech it's ready
+ tech.triggerReady();
+ } else {
+ // wait longer
+ this.setTimeout(function(){
+ vjs.Flash['checkReady'](tech);
+ }, 50);
+ }
+};
+
+// Trigger events from the swf on the player
+vjs.Flash['onEvent'] = function(swfID, eventName){
+ var player = vjs.el(swfID)['player'];
+ player.trigger(eventName);
+};
+
+// Log errors from the swf
+vjs.Flash['onError'] = function(swfID, err){
+ var player = vjs.el(swfID)['player'];
+ var msg = 'FLASH: '+err;
+
+ if (err == 'srcnotfound') {
+ player.error({ code: 4, message: msg });
+
+ // errors we haven't categorized into the media errors
+ } else {
+ player.error(msg);
+ }
+};
+
+// Flash Version Check
+vjs.Flash.version = function(){
+ var version = '0,0,0';
+
+ // IE
+ try {
+ version = new window.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(err) {}
+ }
+ return version.split(',');
+};
+
+// Flash embedding method. Only used in non-iframe mode
+vjs.Flash.embed = function(swf, placeHolder, flashVars, params, attributes){
+ var code = vjs.Flash.getEmbedCode(swf, flashVars, params, attributes),
+
+ // Get element by embedding code and retrieving created element
+ obj = vjs.createEl('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 fix
+ var newObj = par.childNodes[0];
+ setTimeout(function(){
+ newObj.style.display = 'block';
+ }, 1000);
+
+ return obj;
+
+};
+
+vjs.Flash.getEmbedCode = function(swf, flashVars, params, attributes){
+
+ var objTag = '= ct) {
+ active.push(cue);
+ } else if (cue['startTime'] === cue['endTime'] && cue['startTime'] <= ct && cue['startTime'] + 0.5 >= ct) {
+ active.push(cue);
+ }
+ }
+
+ changed = false;
+
+ if (active.length !== this.activeCues_.length) {
+ changed = true;
+ } else {
+ for (i = 0; i < active.length; i++) {
+ if (indexOf.call(this.activeCues_, active[i]) === -1) {
+ changed = true;
+ }
+ }
+ }
+
+ this.activeCues_ = active;
+ activeCues.setCues_(this.activeCues_);
+
+ return activeCues;
+ },
+ set: Function.prototype
+ });
+
+ if (options.src) {
+ loadTrack(options.src, tt);
+ } else {
+ tt.loaded_ = true;
+ }
+
+ if (vjs.IS_IE8) {
+ return tt;
+ }
+};
+
+vjs.TextTrack.prototype = vjs.obj.create(vjs.EventEmitter.prototype);
+vjs.TextTrack.prototype.constructor = vjs.TextTrack;
+
+/*
+ * cuechange - One or more cues in the track have become active or stopped being active.
+ */
+vjs.TextTrack.prototype.allowedEvents_ = {
+ 'cuechange': 'cuechange'
+};
+
+vjs.TextTrack.prototype.addCue = function(cue) {
+ var tracks = this.player_.textTracks(),
+ i = 0;
+
+ if (tracks) {
+ for (; i < tracks.length; i++) {
+ if (tracks[i] !== this) {
+ tracks[i].removeCue(cue);
+ }
+ }
+ }
+
+ this.cues_.push(cue);
+ this['cues'].setCues_(this.cues_);
+};
+
+vjs.TextTrack.prototype.removeCue = function(removeCue) {
+ var i = 0,
+ l = this.cues_.length,
+ cue,
+ removed = false;
+
+ for (; i < l; i++) {
+ cue = this.cues_[i];
+ if (cue === removeCue) {
+ this.cues_.splice(i, 1);
+ removed = true;
+ }
+ }
+
+ if (removed) {
+ this.cues.setCues_(this.cues_);
+ }
+};
+
+/*
+ * Downloading stuff happens below this point
+ */
+var loadTrack, parseCues, indexOf;
+
+loadTrack = function(src, track) {
+ vjs.xhr(src, vjs.bind(this, function(err, response, responseBody){
+ if (err) {
+ return vjs.log.error(err);
+ }
+
+
+ track.loaded_ = true;
+ parseCues(responseBody, track);
+ }));
+};
+
+parseCues = function(srcContent, track) {
+ if (typeof window['WebVTT'] !== 'function') {
+ //try again a bit later
+ return window.setTimeout(function() {
+ parseCues(srcContent, track);
+ }, 25);
+ }
+
+ var parser = new window['WebVTT']['Parser'](window, window['vttjs'], window['WebVTT']['StringDecoder']());
+
+ parser['oncue'] = function(cue) {
+ track.addCue(cue);
+ };
+ parser['onparsingerror'] = function(error) {
+ vjs.log.error(error);
+ };
+
+ parser['parse'](srcContent);
+ parser['flush']();
+};
+
+indexOf = function(searchElement, fromIndex) {
+
+ var k;
+
+ if (this == null) {
+ throw new TypeError('"this" is null or not defined');
+ }
+
+ var O = Object(this);
+
+ var len = O.length >>> 0;
+
+ if (len === 0) {
+ return -1;
+ }
+
+ var n = +fromIndex || 0;
+
+ if (Math.abs(n) === Infinity) {
+ n = 0;
+ }
+
+ if (n >= len) {
+ return -1;
+ }
+
+ k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+
+ while (k < len) {
+ if (k in O && O[k] === searchElement) {
+ return k;
+ }
+ k++;
+ }
+ return -1;
+};
+
+})();
+/*
+ * https://html.spec.whatwg.org/multipage/embedded-content.html#texttracklist
+ *
+ * interface TextTrackList : EventTarget {
+ * readonly attribute unsigned long length;
+ * getter TextTrack (unsigned long index);
+ * TextTrack? getTrackById(DOMString id);
+ *
+ * attribute EventHandler onchange;
+ * attribute EventHandler onaddtrack;
+ * attribute EventHandler onremovetrack;
+ * };
+ */
+vjs.TextTrackList = function(tracks) {
+ var list = this,
+ prop,
+ i = 0;
+
+ if (vjs.IS_IE8) {
+ list = document.createElement('custom');
+
+ for (prop in vjs.TextTrackList.prototype) {
+ list[prop] = vjs.TextTrackList.prototype[prop];
+ }
+ }
+
+ tracks = tracks || [];
+ list.tracks_ = [];
+
+ Object.defineProperty(list, 'length', {
+ get: function() {
+ return this.tracks_.length;
+ }
+ });
+
+ for (; i < tracks.length; i++) {
+ list.addTrack_(tracks[i]);
+ }
+
+ if (vjs.IS_IE8) {
+ return list;
+ }
+};
+
+vjs.TextTrackList.prototype = vjs.obj.create(vjs.EventEmitter.prototype);
+vjs.TextTrackList.prototype.constructor = vjs.TextTrackList;
+
+/*
+ * change - One or more tracks in the track list have been enabled or disabled.
+ * addtrack - A track has been added to the track list.
+ * removetrack - A track has been removed from the track list.
+*/
+vjs.TextTrackList.prototype.allowedEvents_ = {
+ 'change': 'change',
+ 'addtrack': 'addtrack',
+ 'removetrack': 'removetrack'
+};
+
+// emulate attribute EventHandler support to allow for feature detection
+(function() {
+ var event;
+
+ for (event in vjs.TextTrackList.prototype.allowedEvents_) {
+ vjs.TextTrackList.prototype['on' + event] = null;
+ }
+})();
+
+vjs.TextTrackList.prototype.addTrack_ = function(track) {
+ var index = this.tracks_.length;
+ if (!(''+index in this)) {
+ Object.defineProperty(this, index, {
+ get: function() {
+ return this.tracks_[index];
+ }
+ });
+ }
+
+ track.addEventListener('modechange', vjs.bind(this, function() {
+ this.trigger('change');
+ }));
+ this.tracks_.push(track);
+
+ this.trigger({
+ type: 'addtrack',
+ track: track
+ });
+};
+
+vjs.TextTrackList.prototype.removeTrack_ = function(rtrack) {
+ var i = 0,
+ l = this.length,
+ result = null,
+ track;
+
+ for (; i < l; i++) {
+ track = this[i];
+ if (track === rtrack) {
+ this.tracks_.splice(i, 1);
+ break;
+ }
+ }
+
+ this.trigger({
+ type: 'removetrack',
+ track: rtrack
+ });
+};
+
+vjs.TextTrackList.prototype.getTrackById = function(id) {
+ var i = 0,
+ l = this.length,
+ result = null,
+ track;
+
+ for (; i < l; i++) {
+ track = this[i];
+ if (track.id === id) {
+ result = track;
+ break;
+ }
+ }
+
+ return result;
+};
+/*
+ * https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcuelist
+ *
+ * interface TextTrackCueList {
+ * readonly attribute unsigned long length;
+ * getter TextTrackCue (unsigned long index);
+ * TextTrackCue? getCueById(DOMString id);
+ * };
+ */
+
+vjs.TextTrackCueList = function(cues) {
+ var list = this,
+ prop;
+
+ if (vjs.IS_IE8) {
+ list = document.createElement('custom');
+
+ for (prop in vjs.TextTrackCueList.prototype) {
+ list[prop] = vjs.TextTrackCueList.prototype[prop];
+ }
+ }
+
+ vjs.TextTrackCueList.prototype.setCues_.call(list, cues);
+
+ Object.defineProperty(list, 'length', {
+ get: function() {
+ return this.length_;
+ }
+ });
+
+ if (vjs.IS_IE8) {
+ return list;
+ }
+};
+
+vjs.TextTrackCueList.prototype.setCues_ = function(cues) {
+ var oldLength = this.length || 0,
+ i = 0,
+ l = cues.length,
+ defineProp;
+
+ this.cues_ = cues;
+ this.length_ = cues.length;
+
+ defineProp = function(i) {
+ if (!(''+i in this)) {
+ Object.defineProperty(this, '' + i, {
+ get: function() {
+ return this.cues_[i];
+ }
+ });
+ }
+ };
+
+ if (oldLength < l) {
+ i = oldLength;
+ for(; i < l; i++) {
+ defineProp.call(this, i);
+ }
+ }
+};
+
+vjs.TextTrackCueList.prototype.getCueById = function(id) {
+ var i = 0,
+ l = this.length,
+ result = null,
+ cue;
+
+ for (; i < l; i++) {
+ cue = this[i];
+ if (cue.id === id) {
+ result = cue;
+ break;
+ }
+ }
+
+ return result;
+};
+(function() {
+'use strict';
+
+/* Text Track Display
+============================================================================= */
+// Global container for both subtitle and captions text. Simple div container.
+
+/**
+ * The component for displaying text track cues
+ *
+ * @constructor
+ */
+vjs.TextTrackDisplay = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options, ready){
+ vjs.Component.call(this, player, options, ready);
+
+ player.on('loadstart', vjs.bind(this, this.toggleDisplay));
+
+ // This used to be called during player init, but was causing an error
+ // if a track should show by default and the display hadn't loaded yet.
+ // Should probably be moved to an external track loader when we support
+ // tracks that don't need a display.
+ player.ready(vjs.bind(this, function() {
+ if (player.tech && player.tech['featuresNativeTextTracks']) {
+ this.hide();
+ return;
+ }
+
+ var i, tracks, track;
+
+ player.on('fullscreenchange', vjs.bind(this, this.updateDisplay));
+
+ tracks = player.options_['tracks'] || [];
+ for (i = 0; i < tracks.length; i++) {
+ track = tracks[i];
+ this.player_.addRemoteTextTrack(track);
+ }
+ }));
+ }
+});
+
+vjs.TextTrackDisplay.prototype.toggleDisplay = function() {
+ if (this.player_.tech && this.player_.tech['featuresNativeTextTracks']) {
+ this.hide();
+ } else {
+ this.show();
+ }
+};
+
+vjs.TextTrackDisplay.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-text-track-display'
+ });
+};
+
+vjs.TextTrackDisplay.prototype.clearDisplay = function() {
+ if (typeof window['WebVTT'] === 'function') {
+ window['WebVTT']['processCues'](window, [], this.el_);
+ }
+};
+
+// Add cue HTML to display
+var constructColor = function(color, opacity) {
+ return 'rgba(' +
+ // color looks like "#f0e"
+ parseInt(color[1] + color[1], 16) + ',' +
+ parseInt(color[2] + color[2], 16) + ',' +
+ parseInt(color[3] + color[3], 16) + ',' +
+ opacity + ')';
+};
+var darkGray = '#222';
+var lightGray = '#ccc';
+var fontMap = {
+ monospace: 'monospace',
+ sansSerif: 'sans-serif',
+ serif: 'serif',
+ monospaceSansSerif: '"Andale Mono", "Lucida Console", monospace',
+ monospaceSerif: '"Courier New", monospace',
+ proportionalSansSerif: 'sans-serif',
+ proportionalSerif: 'serif',
+ casual: '"Comic Sans MS", Impact, fantasy',
+ script: '"Monotype Corsiva", cursive',
+ smallcaps: '"Andale Mono", "Lucida Console", monospace, sans-serif'
+};
+var tryUpdateStyle = function(el, style, rule) {
+ // some style changes will throw an error, particularly in IE8. Those should be noops.
+ try {
+ el.style[style] = rule;
+ } catch (e) {}
+};
+
+vjs.TextTrackDisplay.prototype.updateDisplay = function() {
+ var tracks = this.player_.textTracks(),
+ i = 0,
+ track;
+
+ this.clearDisplay();
+
+ if (!tracks) {
+ return;
+ }
+
+ for (; i < tracks.length; i++) {
+ track = tracks[i];
+ if (track['mode'] === 'showing') {
+ this.updateForTrack(track);
+ }
+ }
+};
+
+vjs.TextTrackDisplay.prototype.updateForTrack = function(track) {
+ if (typeof window['WebVTT'] !== 'function' || !track['activeCues']) {
+ return;
+ }
+
+ var i = 0,
+ property,
+ cueDiv,
+ overrides = this.player_['textTrackSettings'].getValues(),
+ fontSize,
+ cues = [];
+
+ for (; i < track['activeCues'].length; i++) {
+ cues.push(track['activeCues'][i]);
+ }
+
+ window['WebVTT']['processCues'](window, track['activeCues'], this.el_);
+
+ i = cues.length;
+ while (i--) {
+ cueDiv = cues[i].displayState;
+ if (overrides.color) {
+ cueDiv.firstChild.style.color = overrides.color;
+ }
+ if (overrides.textOpacity) {
+ tryUpdateStyle(cueDiv.firstChild,
+ 'color',
+ constructColor(overrides.color || '#fff',
+ overrides.textOpacity));
+ }
+ if (overrides.backgroundColor) {
+ cueDiv.firstChild.style.backgroundColor = overrides.backgroundColor;
+ }
+ if (overrides.backgroundOpacity) {
+ tryUpdateStyle(cueDiv.firstChild,
+ 'backgroundColor',
+ constructColor(overrides.backgroundColor || '#000',
+ overrides.backgroundOpacity));
+ }
+ if (overrides.windowColor) {
+ if (overrides.windowOpacity) {
+ tryUpdateStyle(cueDiv,
+ 'backgroundColor',
+ constructColor(overrides.windowColor, overrides.windowOpacity));
+ } else {
+ cueDiv.style.backgroundColor = overrides.windowColor;
+ }
+ }
+ if (overrides.edgeStyle) {
+ if (overrides.edgeStyle === 'dropshadow') {
+ cueDiv.firstChild.style.textShadow = '2px 2px 3px ' + darkGray + ', 2px 2px 4px ' + darkGray + ', 2px 2px 5px ' + darkGray;
+ } else if (overrides.edgeStyle === 'raised') {
+ cueDiv.firstChild.style.textShadow = '1px 1px ' + darkGray + ', 2px 2px ' + darkGray + ', 3px 3px ' + darkGray;
+ } else if (overrides.edgeStyle === 'depressed') {
+ cueDiv.firstChild.style.textShadow = '1px 1px ' + lightGray + ', 0 1px ' + lightGray + ', -1px -1px ' + darkGray + ', 0 -1px ' + darkGray;
+ } else if (overrides.edgeStyle === 'uniform') {
+ cueDiv.firstChild.style.textShadow = '0 0 4px ' + darkGray + ', 0 0 4px ' + darkGray + ', 0 0 4px ' + darkGray + ', 0 0 4px ' + darkGray;
+ }
+ }
+ if (overrides.fontPercent && overrides.fontPercent !== 1) {
+ fontSize = window.parseFloat(cueDiv.style.fontSize);
+ cueDiv.style.fontSize = (fontSize * overrides.fontPercent) + 'px';
+ cueDiv.style.height = 'auto';
+ cueDiv.style.top = 'auto';
+ cueDiv.style.bottom = '2px';
+ }
+ if (overrides.fontFamily && overrides.fontFamily !== 'default') {
+ if (overrides.fontFamily === 'small-caps') {
+ cueDiv.firstChild.style.fontVariant = 'small-caps';
+ } else {
+ cueDiv.firstChild.style.fontFamily = fontMap[overrides.fontFamily];
+ }
+ }
+ }
+};
+
+
+/**
+ * The specific menu item type for selecting a language within a text track kind
+ *
+ * @constructor
+ */
+vjs.TextTrackMenuItem = vjs.MenuItem.extend({
+ /** @constructor */
+ init: function(player, options){
+ var track = this.track = options['track'],
+ tracks = player.textTracks(),
+ changeHandler,
+ event;
+
+ if (tracks) {
+ changeHandler = vjs.bind(this, function() {
+ var selected = this.track['mode'] === 'showing',
+ track,
+ i,
+ l;
+
+ if (this instanceof vjs.OffTextTrackMenuItem) {
+ selected = true;
+
+ i = 0,
+ l = tracks.length;
+
+ for (; i < l; i++) {
+ track = tracks[i];
+ if (track['kind'] === this.track['kind'] && track['mode'] === 'showing') {
+ selected = false;
+ break;
+ }
+ }
+ }
+
+ this.selected(selected);
+ });
+ tracks.addEventListener('change', changeHandler);
+ player.on('dispose', function() {
+ tracks.removeEventListener('change', changeHandler);
+ });
+ }
+
+ // Modify options for parent MenuItem class's init.
+ options['label'] = track['label'] || track['language'] || 'Unknown';
+ options['selected'] = track['default'] || track['mode'] === 'showing';
+ vjs.MenuItem.call(this, player, options);
+
+ // iOS7 doesn't dispatch change events to TextTrackLists when an
+ // associated track's mode changes. Without something like
+ // Object.observe() (also not present on iOS7), it's not
+ // possible to detect changes to the mode attribute and polyfill
+ // the change event. As a poor substitute, we manually dispatch
+ // change events whenever the controls modify the mode.
+ if (tracks && tracks.onchange === undefined) {
+ this.on(['tap', 'click'], function() {
+ if (typeof window.Event !== 'object') {
+ // Android 2.3 throws an Illegal Constructor error for window.Event
+ try {
+ event = new window.Event('change');
+ } catch(err){}
+ }
+
+ if (!event) {
+ event = document.createEvent('Event');
+ event.initEvent('change', true, true);
+ }
+
+ tracks.dispatchEvent(event);
+ });
+ }
+ }
+});
+
+vjs.TextTrackMenuItem.prototype.onClick = function(){
+ var kind = this.track['kind'],
+ tracks = this.player_.textTracks(),
+ mode,
+ track,
+ i = 0;
+
+ vjs.MenuItem.prototype.onClick.call(this);
+
+ if (!tracks) {
+ return;
+ }
+
+ for (; i < tracks.length; i++) {
+ track = tracks[i];
+
+ if (track['kind'] !== kind) {
+ continue;
+ }
+
+ if (track === this.track) {
+ track['mode'] = 'showing';
+ } else {
+ track['mode'] = 'disabled';
+ }
+ }
+};
+
+/**
+ * A special menu item for turning of a specific type of text track
+ *
+ * @constructor
+ */
+vjs.OffTextTrackMenuItem = vjs.TextTrackMenuItem.extend({
+ /** @constructor */
+ init: function(player, options){
+ // Create pseudo track info
+ // Requires options['kind']
+ options['track'] = {
+ 'kind': options['kind'],
+ 'player': player,
+ 'label': options['kind'] + ' off',
+ 'default': false,
+ 'mode': 'disabled'
+ };
+ vjs.TextTrackMenuItem.call(this, player, options);
+ this.selected(true);
+ }
+});
+
+vjs.CaptionSettingsMenuItem = vjs.TextTrackMenuItem.extend({
+ init: function(player, options) {
+ options['track'] = {
+ 'kind': options['kind'],
+ 'player': player,
+ 'label': options['kind'] + ' settings',
+ 'default': false,
+ mode: 'disabled'
+ };
+
+ vjs.TextTrackMenuItem.call(this, player, options);
+ this.addClass('vjs-texttrack-settings');
+ }
+});
+
+vjs.CaptionSettingsMenuItem.prototype.onClick = function() {
+ this.player().getChild('textTrackSettings').show();
+};
+
+/**
+ * The base class for buttons that toggle specific text track types (e.g. subtitles)
+ *
+ * @constructor
+ */
+vjs.TextTrackButton = vjs.MenuButton.extend({
+ /** @constructor */
+ init: function(player, options){
+ var tracks, updateHandler;
+
+ vjs.MenuButton.call(this, player, options);
+
+ tracks = this.player_.textTracks();
+
+ if (this.items.length <= 1) {
+ this.hide();
+ }
+
+ if (!tracks) {
+ return;
+ }
+
+ updateHandler = vjs.bind(this, this.update);
+ tracks.addEventListener('removetrack', updateHandler);
+ tracks.addEventListener('addtrack', updateHandler);
+
+ this.player_.on('dispose', function() {
+ tracks.removeEventListener('removetrack', updateHandler);
+ tracks.removeEventListener('addtrack', updateHandler);
+ });
+ }
+});
+
+// Create a menu item for each text track
+vjs.TextTrackButton.prototype.createItems = function(){
+ var items = [], track, tracks;
+
+ if (this instanceof vjs.CaptionsButton && !(this.player().tech && this.player().tech['featuresNativeTextTracks'])) {
+ items.push(new vjs.CaptionSettingsMenuItem(this.player_, { 'kind': this.kind_ }));
+ }
+
+ // Add an OFF menu item to turn all tracks off
+ items.push(new vjs.OffTextTrackMenuItem(this.player_, { 'kind': this.kind_ }));
+
+ tracks = this.player_.textTracks();
+
+ if (!tracks) {
+ return items;
+ }
+
+ for (var i = 0; i < tracks.length; i++) {
+ track = tracks[i];
+
+ // only add tracks that are of the appropriate kind and have a label
+ if (track['kind'] === this.kind_) {
+ items.push(new vjs.TextTrackMenuItem(this.player_, {
+ 'track': track
+ }));
+ }
+ }
+
+ return items;
+};
+
+/**
+ * The button component for toggling and selecting captions
+ *
+ * @constructor
+ */
+vjs.CaptionsButton = vjs.TextTrackButton.extend({
+ /** @constructor */
+ init: function(player, options, ready){
+ vjs.TextTrackButton.call(this, player, options, ready);
+ this.el_.setAttribute('aria-label','Captions Menu');
+ }
+});
+vjs.CaptionsButton.prototype.kind_ = 'captions';
+vjs.CaptionsButton.prototype.buttonText = 'Captions';
+vjs.CaptionsButton.prototype.className = 'vjs-captions-button';
+
+vjs.CaptionsButton.prototype.update = function() {
+ var threshold = 2;
+ vjs.TextTrackButton.prototype.update.call(this);
+
+ // if native, then threshold is 1 because no settings button
+ if (this.player().tech && this.player().tech['featuresNativeTextTracks']) {
+ threshold = 1;
+ }
+
+ if (this.items && this.items.length > threshold) {
+ this.show();
+ } else {
+ this.hide();
+ }
+};
+
+/**
+ * The button component for toggling and selecting subtitles
+ *
+ * @constructor
+ */
+vjs.SubtitlesButton = vjs.TextTrackButton.extend({
+ /** @constructor */
+ init: function(player, options, ready){
+ vjs.TextTrackButton.call(this, player, options, ready);
+ this.el_.setAttribute('aria-label','Subtitles Menu');
+ }
+});
+vjs.SubtitlesButton.prototype.kind_ = 'subtitles';
+vjs.SubtitlesButton.prototype.buttonText = 'Subtitles';
+vjs.SubtitlesButton.prototype.className = 'vjs-subtitles-button';
+
+// Chapters act much differently than other text tracks
+// Cues are navigation vs. other tracks of alternative languages
+/**
+ * The button component for toggling and selecting chapters
+ *
+ * @constructor
+ */
+vjs.ChaptersButton = vjs.TextTrackButton.extend({
+ /** @constructor */
+ init: function(player, options, ready){
+ vjs.TextTrackButton.call(this, player, options, ready);
+ this.el_.setAttribute('aria-label','Chapters Menu');
+ }
+});
+vjs.ChaptersButton.prototype.kind_ = 'chapters';
+vjs.ChaptersButton.prototype.buttonText = 'Chapters';
+vjs.ChaptersButton.prototype.className = 'vjs-chapters-button';
+
+// Create a menu item for each text track
+vjs.ChaptersButton.prototype.createItems = function(){
+ var items = [], track, tracks;
+
+ tracks = this.player_.textTracks();
+
+ if (!tracks) {
+ return items;
+ }
+
+ for (var i = 0; i < tracks.length; i++) {
+ track = tracks[i];
+ if (track['kind'] === this.kind_) {
+ items.push(new vjs.TextTrackMenuItem(this.player_, {
+ 'track': track
+ }));
+ }
+ }
+
+ return items;
+};
+
+vjs.ChaptersButton.prototype.createMenu = function(){
+ var tracks = this.player_.textTracks() || [],
+ i = 0,
+ l = tracks.length,
+ track, chaptersTrack,
+ items = this.items = [];
+
+ for (; i < l; i++) {
+ track = tracks[i];
+ if (track['kind'] == this.kind_) {
+ if (!track.cues) {
+ track['mode'] = 'hidden';
+ /* jshint loopfunc:true */
+ // TODO see if we can figure out a better way of doing this https://github.com/videojs/video.js/issues/1864
+ window.setTimeout(vjs.bind(this, function() {
+ this.createMenu();
+ }), 100);
+ /* jshint loopfunc:false */
+ } else {
+ chaptersTrack = track;
+ break;
+ }
+ }
+ }
+
+ var menu = this.menu;
+ if (menu === undefined) {
+ menu = new vjs.Menu(this.player_);
+ menu.contentEl().appendChild(vjs.createEl('li', {
+ className: 'vjs-menu-title',
+ innerHTML: vjs.capitalize(this.kind_),
+ tabindex: -1
+ }));
+ }
+
+ if (chaptersTrack) {
+ var cues = chaptersTrack['cues'], cue, mi;
+ i = 0;
+ l = cues.length;
+
+ for (; i < l; i++) {
+ cue = cues[i];
+
+ mi = new vjs.ChaptersTrackMenuItem(this.player_, {
+ 'track': chaptersTrack,
+ 'cue': cue
+ });
+
+ items.push(mi);
+
+ menu.addChild(mi);
+ }
+ this.addChild(menu);
+ }
+
+ if (this.items.length > 0) {
+ this.show();
+ }
+
+ return menu;
+};
+
+
+/**
+ * @constructor
+ */
+vjs.ChaptersTrackMenuItem = vjs.MenuItem.extend({
+ /** @constructor */
+ 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']);
+ vjs.MenuItem.call(this, player, options);
+
+ track.addEventListener('cuechange', vjs.bind(this, this.update));
+ }
+});
+
+vjs.ChaptersTrackMenuItem.prototype.onClick = function(){
+ vjs.MenuItem.prototype.onClick.call(this);
+ this.player_.currentTime(this.cue.startTime);
+ this.update(this.cue.startTime);
+};
+
+vjs.ChaptersTrackMenuItem.prototype.update = function(){
+ var cue = this.cue,
+ currentTime = this.player_.currentTime();
+
+ // vjs.log(currentTime, cue.startTime);
+ this.selected(cue['startTime'] <= currentTime && currentTime < cue['endTime']);
+};
+})();
+(function() {
+ 'use strict';
+
+ vjs.TextTrackSettings = vjs.Component.extend({
+ init: function(player, options) {
+ vjs.Component.call(this, player, options);
+ this.hide();
+
+ vjs.on(this.el().querySelector('.vjs-done-button'), 'click', vjs.bind(this, function() {
+ this.saveSettings();
+ this.hide();
+ }));
+
+ vjs.on(this.el().querySelector('.vjs-default-button'), 'click', vjs.bind(this, function() {
+ this.el().querySelector('.vjs-fg-color > select').selectedIndex = 0;
+ this.el().querySelector('.vjs-bg-color > select').selectedIndex = 0;
+ this.el().querySelector('.window-color > select').selectedIndex = 0;
+ this.el().querySelector('.vjs-text-opacity > select').selectedIndex = 0;
+ this.el().querySelector('.vjs-bg-opacity > select').selectedIndex = 0;
+ this.el().querySelector('.vjs-window-opacity > select').selectedIndex = 0;
+ this.el().querySelector('.vjs-edge-style select').selectedIndex = 0;
+ this.el().querySelector('.vjs-font-family select').selectedIndex = 0;
+ this.el().querySelector('.vjs-font-percent select').selectedIndex = 2;
+ this.updateDisplay();
+ }));
+
+ vjs.on(this.el().querySelector('.vjs-fg-color > select'), 'change', vjs.bind(this, this.updateDisplay));
+ vjs.on(this.el().querySelector('.vjs-bg-color > select'), 'change', vjs.bind(this, this.updateDisplay));
+ vjs.on(this.el().querySelector('.window-color > select'), 'change', vjs.bind(this, this.updateDisplay));
+ vjs.on(this.el().querySelector('.vjs-text-opacity > select'), 'change', vjs.bind(this, this.updateDisplay));
+ vjs.on(this.el().querySelector('.vjs-bg-opacity > select'), 'change', vjs.bind(this, this.updateDisplay));
+ vjs.on(this.el().querySelector('.vjs-window-opacity > select'), 'change', vjs.bind(this, this.updateDisplay));
+ vjs.on(this.el().querySelector('.vjs-font-percent select'), 'change', vjs.bind(this, this.updateDisplay));
+ vjs.on(this.el().querySelector('.vjs-edge-style select'), 'change', vjs.bind(this, this.updateDisplay));
+ vjs.on(this.el().querySelector('.vjs-font-family select'), 'change', vjs.bind(this, this.updateDisplay));
+
+ if (player.options()['persistTextTrackSettings']) {
+ this.restoreSettings();
+ }
+ }
+ });
+
+ vjs.TextTrackSettings.prototype.createEl = function() {
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-caption-settings vjs-modal-overlay',
+ innerHTML: captionOptionsMenuTemplate()
+ });
+ };
+
+ vjs.TextTrackSettings.prototype.getValues = function() {
+ var el, bgOpacity, textOpacity, windowOpacity, textEdge, fontFamily, fgColor, bgColor, windowColor, result, name, fontPercent;
+
+ el = this.el();
+
+ textEdge = getSelectedOptionValue(el.querySelector('.vjs-edge-style select'));
+ fontFamily = getSelectedOptionValue(el.querySelector('.vjs-font-family select'));
+ fgColor = getSelectedOptionValue(el.querySelector('.vjs-fg-color > select'));
+ textOpacity = getSelectedOptionValue(el.querySelector('.vjs-text-opacity > select'));
+ bgColor = getSelectedOptionValue(el.querySelector('.vjs-bg-color > select'));
+ bgOpacity = getSelectedOptionValue(el.querySelector('.vjs-bg-opacity > select'));
+ windowColor = getSelectedOptionValue(el.querySelector('.window-color > select'));
+ windowOpacity = getSelectedOptionValue(el.querySelector('.vjs-window-opacity > select'));
+ fontPercent = window['parseFloat'](getSelectedOptionValue(el.querySelector('.vjs-font-percent > select')));
+
+ result = {
+ 'backgroundOpacity': bgOpacity,
+ 'textOpacity': textOpacity,
+ 'windowOpacity': windowOpacity,
+ 'edgeStyle': textEdge,
+ 'fontFamily': fontFamily,
+ 'color': fgColor,
+ 'backgroundColor': bgColor,
+ 'windowColor': windowColor,
+ 'fontPercent': fontPercent
+ };
+ for (name in result) {
+ if (result[name] === '' || result[name] === 'none' || (name === 'fontPercent' && result[name] === 1.00)) {
+ delete result[name];
+ }
+ }
+ return result;
+ };
+
+ vjs.TextTrackSettings.prototype.setValues = function(values) {
+ var el = this.el(), fontPercent;
+
+ setSelectedOption(el.querySelector('.vjs-edge-style select'), values.edgeStyle);
+ setSelectedOption(el.querySelector('.vjs-font-family select'), values.fontFamily);
+ setSelectedOption(el.querySelector('.vjs-fg-color > select'), values.color);
+ setSelectedOption(el.querySelector('.vjs-text-opacity > select'), values.textOpacity);
+ setSelectedOption(el.querySelector('.vjs-bg-color > select'), values.backgroundColor);
+ setSelectedOption(el.querySelector('.vjs-bg-opacity > select'), values.backgroundOpacity);
+ setSelectedOption(el.querySelector('.window-color > select'), values.windowColor);
+ setSelectedOption(el.querySelector('.vjs-window-opacity > select'), values.windowOpacity);
+
+ fontPercent = values.fontPercent;
+
+ if (fontPercent) {
+ fontPercent = fontPercent.toFixed(2);
+ }
+
+ setSelectedOption(el.querySelector('.vjs-font-percent > select'), fontPercent);
+ };
+
+ vjs.TextTrackSettings.prototype.restoreSettings = function() {
+ var values;
+ try {
+ values = JSON.parse(window.localStorage.getItem('vjs-text-track-settings'));
+ } catch (e) {}
+
+ if (values) {
+ this.setValues(values);
+ }
+ };
+
+ vjs.TextTrackSettings.prototype.saveSettings = function() {
+ var values;
+
+ if (!this.player_.options()['persistTextTrackSettings']) {
+ return;
+ }
+
+ values = this.getValues();
+ try {
+ if (!vjs.isEmpty(values)) {
+ window.localStorage.setItem('vjs-text-track-settings', JSON.stringify(values));
+ } else {
+ window.localStorage.removeItem('vjs-text-track-settings');
+ }
+ } catch (e) {}
+ };
+
+ vjs.TextTrackSettings.prototype.updateDisplay = function() {
+ var ttDisplay = this.player_.getChild('textTrackDisplay');
+ if (ttDisplay) {
+ ttDisplay.updateDisplay();
+ }
+ };
+
+ function getSelectedOptionValue(target) {
+ var selectedOption;
+ // not all browsers support selectedOptions, so, fallback to options
+ if (target.selectedOptions) {
+ selectedOption = target.selectedOptions[0];
+ } else if (target.options) {
+ selectedOption = target.options[target.options.selectedIndex];
+ }
+
+ return selectedOption.value;
+ }
+
+ function setSelectedOption(target, value) {
+ var i, option;
+
+ if (!value) {
+ return;
+ }
+
+ for (i = 0; i < target.options.length; i++) {
+ option = target.options[i];
+ if (option.value === value) {
+ break;
+ }
+ }
+
+ target.selectedIndex = i;
+ }
+
+ function captionOptionsMenuTemplate() {
+ return '' +
+ '
' +
+ '
' +
+ 'Foreground ' +
+ '' +
+ '--- ' +
+ 'White ' +
+ 'Black ' +
+ 'Red ' +
+ 'Green ' +
+ 'Blue ' +
+ 'Yellow ' +
+ 'Magenta ' +
+ 'Cyan ' +
+ ' ' +
+ '' +
+ '' +
+ '