v5.3.0 dist

CHANGELOG.md

@@ -6,6 +6,15 @@ _(none)_
 
 --------------------
 
+## 5.3.0 (2015-11-25)
+* @forbesjo updated formatTime to not go negative ([view](https://github.com/videojs/video.js/pull/2821))
+* @imbcmdth added sourceOrder option for source-first ordering in selectSource ([view](https://github.com/videojs/video.js/pull/2847))
+
+## 5.2.4 (2015-11-25)
+* @gesinger checked for track changes before tech started listening ([view](https://github.com/videojs/video.js/pull/2835))
+* @gesinger fixed handler explosion for cuechange events ([view](https://github.com/videojs/video.js/pull/2849))
+* @mmcc fixed vertical volume ([view](https://github.com/videojs/video.js/pull/2859))
+
 ## 5.2.3 (2015-11-24)
 * @gkatsev fixed clearing out errors ([view](https://github.com/videojs/video.js/pull/2850))
 

component.json

@@ -1,7 +1,7 @@
 {
   "name": "video.js",
   "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "version": "5.2.3",
+  "version": "5.3.0",
   "keywords": [
     "videojs",
     "html5",

dist/alt/video.novtt.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Video.js 5.2.3 <http://videojs.com/>
+ * Video.js 5.3.0 <http://videojs.com/>
  * Copyright Brightcove, Inc. <https://www.brightcove.com/>
  * Available under Apache License Version 2.0
  * <https://github.com/videojs/video.js/blob/master/LICENSE>
@@ -1782,8 +1782,14 @@ module.exports = function hasSymbols() {
 	var obj = {};
 	var sym = Symbol('test');
 	if (typeof sym === 'string') { return false; }
-	if (sym instanceof Symbol) { return false; }
-	obj[sym] = 42;
+
+	// temp disabled per https://github.com/ljharb/object.assign/issues/17
+	// if (sym instanceof Symbol) { return false; }
+	// temp disabled per https://github.com/WebReflection/get-own-property-symbols/issues/4
+	// if (!(Object(sym) instanceof Symbol)) { return false; }
+
+	var symVal = 42;
+	obj[sym] = symVal;
 	for (sym in obj) { return false; }
 	if (keys(obj).length !== 0) { return false; }
 	if (typeof Object.keys === 'function' && Object.keys(obj).length !== 0) { return false; }
@@ -1797,7 +1803,7 @@ module.exports = function hasSymbols() {
 
 	if (typeof Object.getOwnPropertyDescriptor === 'function') {
 		var descriptor = Object.getOwnPropertyDescriptor(obj, sym);
-		if (descriptor.value !== 42 || descriptor.enumerable !== true) { return false; }
+		if (descriptor.value !== symVal || descriptor.enumerable !== true) { return false; }
 	}
 
 	return true;
@@ -1820,20 +1826,25 @@ var propIsEnumerable = bind.call(Function.call, Object.prototype.propertyIsEnume
 module.exports = function assign(target, source1) {
 	if (!canBeObject(target)) { throw new TypeError('target must be an object'); }
 	var objTarget = toObject(target);
-	var s, source, i, props, syms;
+	var s, source, i, props, syms, value, key;
 	for (s = 1; s < arguments.length; ++s) {
 		source = toObject(arguments[s]);
 		props = keys(source);
 		if (hasSymbols && Object.getOwnPropertySymbols) {
 			syms = Object.getOwnPropertySymbols(source);
 			for (i = 0; i < syms.length; ++i) {
-				if (propIsEnumerable(source, syms[i])) {
-					push(props, syms[i]);
+				key = syms[i];
+				if (propIsEnumerable(source, key)) {
+					push(props, key);
 				}
 			}
 		}
 		for (i = 0; i < props.length; ++i) {
-			objTarget[props[i]] = source[props[i]];
+			key = props[i];
+			value = source[key];
+			if (propIsEnumerable(source, key)) {
+				objTarget[key] = value;
+			}
 		}
 	}
 	return objTarget;
@@ -2142,6 +2153,26 @@ module.exports = function isArguments(value) {
 
 var implementation = _dereq_('./implementation');
 
+var lacksProperEnumerationOrder = function () {
+	if (!Object.assign) {
+		return false;
+	}
+	// v8, specifically in node 4.x, has a bug with incorrect property enumeration order
+	// note: this does not detect the bug unless there's 20 characters
+	var str = 'abcdefghijklmnopqrst';
+	var letters = str.split('');
+	var map = {};
+	for (var i = 0; i < letters.length; ++i) {
+		map[letters[i]] = letters[i];
+	}
+	var obj = Object.assign({}, map);
+	var actual = '';
+	for (var k in obj) {
+		actual += k;
+	}
+	return str !== actual;
+};
+
 var assignHasPendingExceptions = function () {
 	if (!Object.assign || !Object.preventExtensions) {
 		return false;
@@ -2157,7 +2188,16 @@ var assignHasPendingExceptions = function () {
 };
 
 module.exports = function getPolyfill() {
-	return !Object.assign || assignHasPendingExceptions() ? implementation : Object.assign;
+	if (!Object.assign) {
+		return implementation;
+	}
+	if (lacksProperEnumerationOrder()) {
+		return implementation;
+	}
+	if (assignHasPendingExceptions()) {
+		return implementation;
+	}
+	return Object.assign;
 };
 
 },{"./implementation":44}],52:[function(_dereq_,module,exports){
@@ -2168,9 +2208,11 @@ var getPolyfill = _dereq_('./polyfill');
 
 module.exports = function shimAssign() {
 	var polyfill = getPolyfill();
-	if (Object.assign !== polyfill) {
-		define(Object, { assign: polyfill });
-	}
+	define(
+		Object,
+		{ assign: polyfill },
+		{ assign: function () { return Object.assign !== polyfill; } }
+	);
 	return polyfill;
 };
 
@@ -10708,7 +10750,9 @@ var Player = (function (_Component) {
   };
 
   /**
-   * Select source based on tech order
+   * Select source based on tech-order or source-order
+   * Uses source-order selection if `options.sourceOrder` is truthy. Otherwise,
+   * defaults to tech-order selection
    *
    * @param {Array} sources The sources for a media asset
    * @return {Object|Boolean} Object of source and tech order, otherwise false
@@ -10716,36 +10760,72 @@ var Player = (function (_Component) {
    */
 
   Player.prototype.selectSource = function selectSource(sources) {
-    // Loop through each playback technology in the options order
-    for (var i = 0, j = this.options_.techOrder; i < j.length; i++) {
-      var techName = _utilsToTitleCaseJs2['default'](j[i]);
-      var tech = _techTechJs2['default'].getTech(techName);
-      // Support old behavior of techs being registered as components.
+    // Get only the techs specified in `techOrder` that exist and are supported by the
+    // current platform
+    var techs = this.options_.techOrder.map(_utilsToTitleCaseJs2['default']).map(function (techName) {
+      // `Component.getComponent(...)` is for support of old behavior of techs
+      // being registered as components.
       // Remove once that deprecated behavior is removed.
-      if (!tech) {
-        tech = _componentJs2['default'].getComponent(techName);
-      }
+      return [techName, _techTechJs2['default'].getTech(techName) || _componentJs2['default'].getComponent(techName)];
+    }).filter(function (_ref) {
+      var techName = _ref[0];
+      var tech = _ref[1];
+
       // Check if the current tech is defined before continuing
-      if (!tech) {
-        _utilsLogJs2['default'].error('The "' + techName + '" tech is undefined. Skipped browser support check for that tech.');
-        continue;
+      if (tech) {
+        // Check if the browser supports this technology
+        return tech.isSupported();
       }
 
-      // Check if the browser supports this technology
-      if (tech.isSupported()) {
-        // Loop through each source object
-        for (var a = 0, b = sources; a < b.length; a++) {
-          var source = b[a];
+      _utilsLogJs2['default'].error('The "' + techName + '" tech is undefined. Skipped browser support check for that tech.');
+      return false;
+    });
 
-          // Check if source can be played with this technology
-          if (tech.canPlaySource(source)) {
-            return { source: source, tech: techName };
+    // Iterate over each `innerArray` element once per `outerArray` element and execute
+    // `tester` with both. If `tester` returns a non-falsy value, exit early and return
+    // that value.
+    var findFirstPassingTechSourcePair = function findFirstPassingTechSourcePair(outerArray, innerArray, tester) {
+      var found = undefined;
+
+      outerArray.some(function (outerChoice) {
+        return innerArray.some(function (innerChoice) {
+          found = tester(outerChoice, innerChoice);
+
+          if (found) {
+            return true;
           }
-        }
+        });
+      });
+
+      return found;
+    };
+
+    var foundSourceAndTech = undefined;
+    var flip = function flip(fn) {
+      return function (a, b) {
+        return fn(b, a);
+      };
+    };
+    var finder = function finder(_ref2, source) {
+      var techName = _ref2[0];
+      var tech = _ref2[1];
+
+      if (tech.canPlaySource(source)) {
+        return { source: source, tech: techName };
       }
+    };
+
+    // Depending on the truthiness of `options.sourceOrder`, we swap the order of techs and sources
+    // to select from them based on their priority.
+    if (this.options_.sourceOrder) {
+      // Source-first ordering
+      foundSourceAndTech = findFirstPassingTechSourcePair(sources, techs, flip(finder));
+    } else {
+      // Tech-first ordering
+      foundSourceAndTech = findFirstPassingTechSourcePair(techs, sources, finder);
     }
 
-    return false;
+    return foundSourceAndTech || false;
   };
 
   /**
@@ -14835,6 +14915,8 @@ var Tech = (function (_Component) {
    */
 
   Tech.prototype.emulateTextTracks = function emulateTextTracks() {
+    var _this = this;
+
     var tracks = this.textTracks();
     if (!tracks) {
       return;
@@ -14847,13 +14929,10 @@ var Tech = (function (_Component) {
       _globalWindow2['default']['WebVTT'] = true;
     }
 
-    var textTracksChanges = Fn.bind(this, function () {
-      var _this = this;
-
-      var updateDisplay = function updateDisplay() {
-        return _this.trigger('texttrackchange');
-      };
-
+    var updateDisplay = function updateDisplay() {
+      return _this.trigger('texttrackchange');
+    };
+    var textTracksChanges = function textTracksChanges() {
       updateDisplay();
 
       for (var i = 0; i < tracks.length; i++) {
@@ -14863,8 +14942,9 @@ var Tech = (function (_Component) {
           track.addEventListener('cuechange', updateDisplay);
         }
       }
-    });
+    };
 
+    textTracksChanges();
     tracks.addEventListener('change', textTracksChanges);
 
     this.on('dispose', function () {
@@ -17917,6 +17997,7 @@ exports.__esModule = true;
 function formatTime(seconds) {
   var guide = arguments.length <= 1 || arguments[1] === undefined ? seconds : arguments[1];
   return (function () {
+    seconds = seconds < 0 ? 0 : seconds;
     var s = Math.floor(seconds % 60);
     var m = Math.floor(seconds / 60 % 60);
     var h = Math.floor(seconds / 3600);
@@ -18588,7 +18669,7 @@ setup.autoSetupTimeout(1, videojs);
  *
  * @type {String}
  */
-videojs.VERSION = '5.2.3';
+videojs.VERSION = '5.3.0';
 
 /**
  * The global options object. These are the settings that take effect

dist/video-js.css

@@ -499,7 +499,7 @@ about what's required to play video. */
   /* Same as ul background */ }
 
 /* Button Pop-up Menu */
-.vjs-menu-button-popup .vjs-menu ul {
+.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
   background-color: #2B333F;
   background-color: rgba(43, 51, 63, 0.7);
   position: absolute;
@@ -911,7 +911,8 @@ width and height to zero. */
   border-top-color: transparent; }
 
 .vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
-  left: 0.5em; }
+  left: 0.5em;
+  height: 8em; }
 
 .vjs-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu {
   left: -2em; }

dist/video.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Video.js 5.2.3 <http://videojs.com/>
+ * Video.js 5.3.0 <http://videojs.com/>
  * Copyright Brightcove, Inc. <https://www.brightcove.com/>
  * Available under Apache License Version 2.0
  * <https://github.com/videojs/video.js/blob/master/LICENSE>
@@ -1786,8 +1786,14 @@ module.exports = function hasSymbols() {
 	var obj = {};
 	var sym = Symbol('test');
 	if (typeof sym === 'string') { return false; }
-	if (sym instanceof Symbol) { return false; }
-	obj[sym] = 42;
+
+	// temp disabled per https://github.com/ljharb/object.assign/issues/17
+	// if (sym instanceof Symbol) { return false; }
+	// temp disabled per https://github.com/WebReflection/get-own-property-symbols/issues/4
+	// if (!(Object(sym) instanceof Symbol)) { return false; }
+
+	var symVal = 42;
+	obj[sym] = symVal;
 	for (sym in obj) { return false; }
 	if (keys(obj).length !== 0) { return false; }
 	if (typeof Object.keys === 'function' && Object.keys(obj).length !== 0) { return false; }
@@ -1801,7 +1807,7 @@ module.exports = function hasSymbols() {
 
 	if (typeof Object.getOwnPropertyDescriptor === 'function') {
 		var descriptor = Object.getOwnPropertyDescriptor(obj, sym);
-		if (descriptor.value !== 42 || descriptor.enumerable !== true) { return false; }
+		if (descriptor.value !== symVal || descriptor.enumerable !== true) { return false; }
 	}
 
 	return true;
@@ -1824,20 +1830,25 @@ var propIsEnumerable = bind.call(Function.call, Object.prototype.propertyIsEnume
 module.exports = function assign(target, source1) {
 	if (!canBeObject(target)) { throw new TypeError('target must be an object'); }
 	var objTarget = toObject(target);
-	var s, source, i, props, syms;
+	var s, source, i, props, syms, value, key;
 	for (s = 1; s < arguments.length; ++s) {
 		source = toObject(arguments[s]);
 		props = keys(source);
 		if (hasSymbols && Object.getOwnPropertySymbols) {
 			syms = Object.getOwnPropertySymbols(source);
 			for (i = 0; i < syms.length; ++i) {
-				if (propIsEnumerable(source, syms[i])) {
-					push(props, syms[i]);
+				key = syms[i];
+				if (propIsEnumerable(source, key)) {
+					push(props, key);
 				}
 			}
 		}
 		for (i = 0; i < props.length; ++i) {
-			objTarget[props[i]] = source[props[i]];
+			key = props[i];
+			value = source[key];
+			if (propIsEnumerable(source, key)) {
+				objTarget[key] = value;
+			}
 		}
 	}
 	return objTarget;
@@ -2146,6 +2157,26 @@ module.exports = function isArguments(value) {
 
 var implementation = _dereq_('./implementation');
 
+var lacksProperEnumerationOrder = function () {
+	if (!Object.assign) {
+		return false;
+	}
+	// v8, specifically in node 4.x, has a bug with incorrect property enumeration order
+	// note: this does not detect the bug unless there's 20 characters
+	var str = 'abcdefghijklmnopqrst';
+	var letters = str.split('');
+	var map = {};
+	for (var i = 0; i < letters.length; ++i) {
+		map[letters[i]] = letters[i];
+	}
+	var obj = Object.assign({}, map);
+	var actual = '';
+	for (var k in obj) {
+		actual += k;
+	}
+	return str !== actual;
+};
+
 var assignHasPendingExceptions = function () {
 	if (!Object.assign || !Object.preventExtensions) {
 		return false;
@@ -2161,7 +2192,16 @@ var assignHasPendingExceptions = function () {
 };
 
 module.exports = function getPolyfill() {
-	return !Object.assign || assignHasPendingExceptions() ? implementation : Object.assign;
+	if (!Object.assign) {
+		return implementation;
+	}
+	if (lacksProperEnumerationOrder()) {
+		return implementation;
+	}
+	if (assignHasPendingExceptions()) {
+		return implementation;
+	}
+	return Object.assign;
 };
 
 },{"./implementation":44}],52:[function(_dereq_,module,exports){
@@ -2172,9 +2212,11 @@ var getPolyfill = _dereq_('./polyfill');
 
 module.exports = function shimAssign() {
 	var polyfill = getPolyfill();
-	if (Object.assign !== polyfill) {
-		define(Object, { assign: polyfill });
-	}
+	define(
+		Object,
+		{ assign: polyfill },
+		{ assign: function () { return Object.assign !== polyfill; } }
+	);
 	return polyfill;
 };
 
@@ -10712,7 +10754,9 @@ var Player = (function (_Component) {
   };
 
   /**
-   * Select source based on tech order
+   * Select source based on tech-order or source-order
+   * Uses source-order selection if `options.sourceOrder` is truthy. Otherwise,
+   * defaults to tech-order selection
    *
    * @param {Array} sources The sources for a media asset
    * @return {Object|Boolean} Object of source and tech order, otherwise false
@@ -10720,36 +10764,72 @@ var Player = (function (_Component) {
    */
 
   Player.prototype.selectSource = function selectSource(sources) {
-    // Loop through each playback technology in the options order
-    for (var i = 0, j = this.options_.techOrder; i < j.length; i++) {
-      var techName = _utilsToTitleCaseJs2['default'](j[i]);
-      var tech = _techTechJs2['default'].getTech(techName);
-      // Support old behavior of techs being registered as components.
+    // Get only the techs specified in `techOrder` that exist and are supported by the
+    // current platform
+    var techs = this.options_.techOrder.map(_utilsToTitleCaseJs2['default']).map(function (techName) {
+      // `Component.getComponent(...)` is for support of old behavior of techs
+      // being registered as components.
       // Remove once that deprecated behavior is removed.
-      if (!tech) {
-        tech = _componentJs2['default'].getComponent(techName);
-      }
+      return [techName, _techTechJs2['default'].getTech(techName) || _componentJs2['default'].getComponent(techName)];
+    }).filter(function (_ref) {
+      var techName = _ref[0];
+      var tech = _ref[1];
+
       // Check if the current tech is defined before continuing
-      if (!tech) {
-        _utilsLogJs2['default'].error('The "' + techName + '" tech is undefined. Skipped browser support check for that tech.');
-        continue;
+      if (tech) {
+        // Check if the browser supports this technology
+        return tech.isSupported();
       }
 
-      // Check if the browser supports this technology
-      if (tech.isSupported()) {
-        // Loop through each source object
-        for (var a = 0, b = sources; a < b.length; a++) {
-          var source = b[a];
+      _utilsLogJs2['default'].error('The "' + techName + '" tech is undefined. Skipped browser support check for that tech.');
+      return false;
+    });
 
-          // Check if source can be played with this technology
-          if (tech.canPlaySource(source)) {
-            return { source: source, tech: techName };
+    // Iterate over each `innerArray` element once per `outerArray` element and execute
+    // `tester` with both. If `tester` returns a non-falsy value, exit early and return
+    // that value.
+    var findFirstPassingTechSourcePair = function findFirstPassingTechSourcePair(outerArray, innerArray, tester) {
+      var found = undefined;
+
+      outerArray.some(function (outerChoice) {
+        return innerArray.some(function (innerChoice) {
+          found = tester(outerChoice, innerChoice);
+
+          if (found) {
+            return true;
           }
-        }
+        });
+      });
+
+      return found;
+    };
+
+    var foundSourceAndTech = undefined;
+    var flip = function flip(fn) {
+      return function (a, b) {
+        return fn(b, a);
+      };
+    };
+    var finder = function finder(_ref2, source) {
+      var techName = _ref2[0];
+      var tech = _ref2[1];
+
+      if (tech.canPlaySource(source)) {
+        return { source: source, tech: techName };
       }
+    };
+
+    // Depending on the truthiness of `options.sourceOrder`, we swap the order of techs and sources
+    // to select from them based on their priority.
+    if (this.options_.sourceOrder) {
+      // Source-first ordering
+      foundSourceAndTech = findFirstPassingTechSourcePair(sources, techs, flip(finder));
+    } else {
+      // Tech-first ordering
+      foundSourceAndTech = findFirstPassingTechSourcePair(techs, sources, finder);
     }
 
-    return false;
+    return foundSourceAndTech || false;
   };
 
   /**
@@ -14839,6 +14919,8 @@ var Tech = (function (_Component) {
    */
 
   Tech.prototype.emulateTextTracks = function emulateTextTracks() {
+    var _this = this;
+
     var tracks = this.textTracks();
     if (!tracks) {
       return;
@@ -14851,13 +14933,10 @@ var Tech = (function (_Component) {
       _globalWindow2['default']['WebVTT'] = true;
     }
 
-    var textTracksChanges = Fn.bind(this, function () {
-      var _this = this;
-
-      var updateDisplay = function updateDisplay() {
-        return _this.trigger('texttrackchange');
-      };
-
+    var updateDisplay = function updateDisplay() {
+      return _this.trigger('texttrackchange');
+    };
+    var textTracksChanges = function textTracksChanges() {
       updateDisplay();
 
       for (var i = 0; i < tracks.length; i++) {
@@ -14867,8 +14946,9 @@ var Tech = (function (_Component) {
           track.addEventListener('cuechange', updateDisplay);
         }
       }
-    });
+    };
 
+    textTracksChanges();
     tracks.addEventListener('change', textTracksChanges);
 
     this.on('dispose', function () {
@@ -17921,6 +18001,7 @@ exports.__esModule = true;
 function formatTime(seconds) {
   var guide = arguments.length <= 1 || arguments[1] === undefined ? seconds : arguments[1];
   return (function () {
+    seconds = seconds < 0 ? 0 : seconds;
     var s = Math.floor(seconds % 60);
     var m = Math.floor(seconds / 60 % 60);
     var h = Math.floor(seconds / 3600);
@@ -18592,7 +18673,7 @@ setup.autoSetupTimeout(1, videojs);
  *
  * @type {String}
  */
-videojs.VERSION = '5.2.3';
+videojs.VERSION = '5.3.0';
 
 /**
  * The global options object. These are the settings that take effect

docs/guides/tech.md

@@ -49,6 +49,40 @@ When adding additional Tech to a video player, make sure to add the supported te
       techOrder: ["html5", "flash", "other supported tech"]
     });
 
+Technology Ordering
+==================
+By default Video.js performs "Tech-first" ordering when it searches for a source/tech combination to play videos. This means that if you have two sources and two techs, video.js will try to play each video with the first tech in the `techOrder` option property before moving on to try the next playback technology.
+
+Tech-first ordering can present a problem if you have a `sourceHandler` that supports both `Html5` and `Flash` techs such as videojs-contrib-hls.
+
+For example, given the following video element:
+
+  <video data-setup='{"techOrder": ["html5", "flash"]}'>
+    <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
+    <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
+  </video>
+
+There is a good chance that the mp4 source will be selected on platforms that do not have media source extensions. Video.js will try all sources against the first playback technology, in this case `Html5`, and select the first source that can play - in this case MP4.
+
+In "Tech-first" mode, the tests run something like this:
+  Can video.m3u8 play with Html5? No...
+  Can video.mp4 play with Html5? Yes! Use the second source.
+
+Video.js now provides another method of selecting the source - "Source-first" ordering. In this mode, Video.js tries the first source against every tech in `techOrder` before moving onto the next source.
+
+With a player setup as follows:
+
+  <video data-setup='{"techOrder": ["html5", "flash"], "sourceOrder": true}'>
+    <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
+    <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
+  </video>
+
+The Flash-based HLS support will be tried before falling back to the MP4 source.
+
+In "Source-first" mode, the tests run something like this:
+  Can video.m3u8 play with Html5? No...
+  Can video.m3u8 play with Flash? Yes! Use the first source.
+
 Flash Technology
 ==================
 The Flash playback tech is a part of the default `techOrder`. You may notice undesirable playback behavior in browsers that are subject to using this playback tech, in particular when scrubbing and seeking within a video. This behavior is a result of Flash's progressive video playback.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "video.js",
   "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "version": "5.2.3",
+  "version": "5.3.0",
   "copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",
   "license": "Apache-2.0",
   "keywords": [

src/css/components/_volume.scss

@@ -96,6 +96,7 @@ width and height to zero. */
 
 .vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
   left: 0.5em;
+  height: 8em;
 }
 .vjs-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu {
   left: -2em;

src/css/components/menu/_menu-popup.scss

@@ -10,7 +10,7 @@
 }
 
 /* Button Pop-up Menu */
-.vjs-menu-button-popup .vjs-menu ul {
+.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
   @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
 
   position: absolute;

src/js/player.js

@@ -1693,43 +1693,75 @@ class Player extends Component {
   }
 
   /**
-   * Select source based on tech order
+   * Select source based on tech-order or source-order
+   * Uses source-order selection if `options.sourceOrder` is truthy. Otherwise,
+   * defaults to tech-order selection
    *
    * @param {Array} sources The sources for a media asset
    * @return {Object|Boolean} Object of source and tech order, otherwise false
    * @method selectSource
    */
   selectSource(sources) {
-    // Loop through each playback technology in the options order
-    for (var i=0,j=this.options_.techOrder;i<j.length;i++) {
-      let techName = toTitleCase(j[i]);
-      let tech = Tech.getTech(techName);
-      // Support old behavior of techs being registered as components.
-      // Remove once that deprecated behavior is removed.
-      if (!tech) {
-        tech = Component.getComponent(techName);
-      }
-      // Check if the current tech is defined before continuing
-      if (!tech) {
-        log.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
-        continue;
-      }
-
-      // Check if the browser supports this technology
-      if (tech.isSupported()) {
-        // Loop through each source object
-        for (var a=0,b=sources;a<b.length;a++) {
-          var source = b[a];
-
-          // Check if source can be played with this technology
-          if (tech.canPlaySource(source)) {
-            return { source: source, tech: techName };
+    // Get only the techs specified in `techOrder` that exist and are supported by the
+    // current platform
+    let techs =
+      this.options_.techOrder
+        .map(toTitleCase)
+        .map((techName) => {
+          // `Component.getComponent(...)` is for support of old behavior of techs
+          // being registered as components.
+          // Remove once that deprecated behavior is removed.
+          return [techName, Tech.getTech(techName) || Component.getComponent(techName)];
+        })
+        .filter(([techName, tech]) => {
+          // Check if the current tech is defined before continuing
+          if (tech) {
+            // Check if the browser supports this technology
+            return tech.isSupported();
           }
-        }
+
+          log.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+          return false;
+        });
+
+    // Iterate over each `innerArray` element once per `outerArray` element and execute
+    // `tester` with both. If `tester` returns a non-falsy value, exit early and return
+    // that value.
+    let findFirstPassingTechSourcePair = function (outerArray, innerArray, tester) {
+      let found;
+
+      outerArray.some((outerChoice) => {
+        return innerArray.some((innerChoice) => {
+          found = tester(outerChoice, innerChoice);
+
+          if (found) {
+            return true;
+          }
+        });
+      });
+
+      return found;
+    };
+
+    let foundSourceAndTech;
+    let flip = (fn) => (a, b) => fn(b, a);
+    let finder = ([techName, tech], source) => {
+      if (tech.canPlaySource(source)) {
+        return {source: source, tech: techName};
       }
+    };
+
+    // Depending on the truthiness of `options.sourceOrder`, we swap the order of techs and sources
+    // to select from them based on their priority.
+    if (this.options_.sourceOrder) {
+      // Source-first ordering
+      foundSourceAndTech = findFirstPassingTechSourcePair(sources, techs, flip(finder));
+    } else {
+      // Tech-first ordering
+      foundSourceAndTech = findFirstPassingTechSourcePair(techs, sources, finder);
     }
 
-    return false;
+    return foundSourceAndTech || false;
   }
 
   /**

src/js/tech/tech.js

@@ -321,9 +321,8 @@ class Tech extends Component {
       window['WebVTT'] = true;
     }
 
-    let textTracksChanges = Fn.bind(this, function() {
-      let updateDisplay = () => this.trigger('texttrackchange');
-
+    let updateDisplay = () => this.trigger('texttrackchange');
+    let textTracksChanges = () => {
       updateDisplay();
 
       for (let i = 0; i < tracks.length; i++) {
@@ -333,8 +332,9 @@ class Tech extends Component {
           track.addEventListener('cuechange', updateDisplay);
         }
       }
-    });
+    };
 
+    textTracksChanges();
     tracks.addEventListener('change', textTracksChanges);
 
     this.on('dispose', function() {

src/js/utils/format-time.js

@@ -12,6 +12,7 @@
  * @function formatTime
  */
 function formatTime(seconds, guide=seconds) {
+  seconds = seconds < 0 ? 0 : seconds;
   let s = Math.floor(seconds % 60);
   let m = Math.floor(seconds / 60 % 60);
   let h = Math.floor(seconds / 3600);

test/unit/player.test.js

@@ -7,6 +7,8 @@ import MediaError from '../../src/js/media-error.js';
 import Html5 from '../../src/js/tech/html5.js';
 import TestHelpers from './test-helpers.js';
 import document from 'global/document';
+import Tech from '../../src/js/tech/tech.js';
+import TechFaker from './tech/tech-faker.js';
 
 q.module('Player', {
   'setup': function() {
@@ -408,6 +410,43 @@ test('make sure that controls listeners do not get added too many times', functi
   player.dispose();
 });
 
+test('should select the proper tech based on the the sourceOrder option',
+  function() {
+    let fixture = document.getElementById('qunit-fixture');
+    let html =
+        '<video id="example_1">' +
+          '<source src="fake.foo1" type="video/unsupported-format">' +
+          '<source src="fake.foo2" type="video/foo-format">' +
+        '</video>';
+
+    // Extend TechFaker to create a tech that plays the only mime-type that TechFaker
+    // will not play
+    class PlaysUnsupported extends TechFaker {
+      constructor(options, handleReady){
+        super(options, handleReady);
+      }
+      // Support ONLY "video/unsupported-format"
+      static isSupported() { return true; }
+      static canPlayType(type) { return (type === 'video/unsupported-format' ? 'maybe' : ''); }
+      static canPlaySource(srcObj) { return srcObj.type === 'video/unsupported-format'; }
+    }
+    Tech.registerTech('PlaysUnsupported', PlaysUnsupported);
+
+    fixture.innerHTML += html;
+    let tag = document.getElementById('example_1');
+
+    let player = new Player(tag, { techOrder: ['techFaker', 'playsUnsupported'], sourceOrder: true });
+    equal(player.techName_, 'PlaysUnsupported', 'selected the PlaysUnsupported tech when sourceOrder is truthy');
+    player.dispose();
+
+    fixture.innerHTML += html;
+    tag = document.getElementById('example_1');
+
+    player = new Player(tag, { techOrder: ['techFaker', 'playsUnsupported']});
+    equal(player.techName_, 'TechFaker', 'selected the TechFaker tech when sourceOrder is falsey');
+    player.dispose();
+});
+
 test('should register players with generated ids', function(){
   var fixture, video, player, id;
   fixture = document.getElementById('qunit-fixture');

test/unit/tracks/tracks.test.js

@@ -2,6 +2,7 @@ import ChaptersButton from '../../../src/js/control-bar/text-track-controls/chap
 import SubtitlesButton from '../../../src/js/control-bar/text-track-controls/subtitles-button.js';
 import CaptionsButton from '../../../src/js/control-bar/text-track-controls/captions-button.js';
 
+import TextTrack from '../../../src/js/tracks/text-track.js';
 import TextTrackDisplay from '../../../src/js/tracks/text-track-display.js';
 import Html5 from '../../../src/js/tech/html5.js';
 import Flash from '../../../src/js/tech/flash.js';
@@ -342,3 +343,58 @@ if (Html5.supportsNativeTextTracks()) {
     emulatedTt.on('addtrack', addtrack);
   });
 }
+
+test('should check for text track changes when emulating text tracks', function() {
+  let tech = new Tech();
+  let numTextTrackChanges = 0;
+  tech.on('texttrackchange', function() {
+    numTextTrackChanges++;
+  });
+  tech.emulateTextTracks();
+  equal(numTextTrackChanges, 1, 'we got a texttrackchange event');
+});
+
+test('removes cuechange event when text track is hidden for emulated tracks', function() {
+  let player = TestHelpers.makePlayer();
+  let tt = new TextTrack({
+    tech: player.tech_,
+    mode: 'showing'
+  });
+  tt.addCue({
+    id: '1',
+    startTime: 2,
+    endTime: 5
+  });
+  player.tech_.textTracks().addTrack_(tt);
+  player.tech_.emulateTextTracks();
+
+  let numTextTrackChanges = 0;
+  player.tech_.on('texttrackchange', function() {
+    numTextTrackChanges++;
+  });
+
+  tt.mode = 'showing';
+  equal(numTextTrackChanges, 1,
+    'texttrackchange should be called once for mode change');
+  tt.mode = 'showing';
+  equal(numTextTrackChanges, 2,
+    'texttrackchange should be called once for mode change');
+
+  player.tech_.currentTime = function() {
+    return 3;
+  };
+  player.tech_.trigger('timeupdate');
+  equal(numTextTrackChanges, 3,
+    'texttrackchange should be triggered once for the cuechange');
+
+  tt.mode = 'hidden';
+  equal(numTextTrackChanges, 4,
+    'texttrackchange should be called once for the mode change');
+
+  player.tech_.currentTime = function() {
+    return 7;
+  };
+  player.tech_.trigger('timeupdate');
+  equal(numTextTrackChanges, 4,
+    'texttrackchange should be not be called since mode is hidden');
+});

test/unit/utils/format-time.test.js

@@ -20,6 +20,10 @@ test('should format time as a string', function(){
   // Don't do extra leading zeros for hours
   ok(formatTime(1,36000) === '0:00:01');
   ok(formatTime(1,360000) === '0:00:01');
+
+  // Do not display negative time
+  ok(formatTime(-1) === '0:00');
+  ok(formatTime(-1,3600) === '0:00:00');
 });
 
 test('should format invalid times as dashes', function(){