fix: Progress holder gaps cause tooltips misalignment.

src/css/components/_progress.scss

@@ -25,6 +25,15 @@
   height: 0.3em;
 }
 
+.video-js .vjs-progress-control .vjs-progress-holder {
+
+  // This is one of the rare cases where we are using a pixel dimension. The
+  // reason is that the progress holder font-size changes on hover. With the
+  // default em-based margins, this means it gets narrower and causes issues
+  // with mouseover behaviors/math.
+  margin: 0 10px;
+}
+
 // This increases the size of the progress holder so there is an increased
 // hit area for clicks/touches.
 .video-js .vjs-progress-control:hover .vjs-progress-holder {
@@ -83,17 +92,14 @@
 
 // .vjs-time-tooltip
 //
-// These elements are displayed above the progress bar. They are not components
-// themselves, but they are managed by the MouseTimeDisplay and PlayProgressBar
-// components individually.
+// These elements are displayed above the progress bar.
 //
 // By default, they are hidden and only shown when hovering over the progress
 // control.
 .video-js .vjs-time-tooltip {
   @include background-color-with-alpha(#fff, 0.8);
   @include border-radius(0.3em);
   color: #000;
-  display: inline-block;
 
   // By floating the tooltips to the right, their right edge becomes aligned
   // with the right edge of their parent element. However, in order to have them
@@ -114,7 +120,13 @@
   z-index: 1;
 }
 
-.video-js .vjs-progress-control:hover .vjs-time-tooltip {
+.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: none;
+}
+
+.video-js .vjs-progress-control:hover .vjs-time-tooltip,
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: block;
 
   // Ensure that we maintain a font-size of ~10px.
   font-size: 0.6em;

src/js/control-bar/progress-control/mouse-time-display.js

@@ -2,10 +2,8 @@
  * @file mouse-time-display.js
  */
 import Component from '../../component.js';
-// import * as Dom from '../../utils/dom.js';
 import * as Fn from '../../utils/fn.js';
 import formatTime from '../../utils/format-time.js';
-// import computedStyle from '../../utils/computed-style.js';
 
 import './time-tooltip';
 
@@ -34,7 +32,7 @@ class MouseTimeDisplay extends Component {
   }
 
   /**
-   * Create the the DOM element for this class.
+   * Create the DOM element for this class.
    *
    * @return {Element}
    *         The element that was created.

src/js/control-bar/progress-control/play-progress-bar.js

@@ -2,6 +2,7 @@
  * @file play-progress-bar.js
  */
 import Component from '../../component.js';
+import {IE_VERSION} from '../../utils/browser.js';
 import formatTime from '../../utils/format-time.js';
 
 import './time-tooltip';
@@ -14,19 +15,6 @@ import './time-tooltip';
  */
 class PlayProgressBar extends Component {
 
-  /**
-   * Creates an instance of this class.
-   *
-   * @param {Player} player
-   *        The {@link Player} that this class should be attached to.
-   *
-   * @param {Object} [options]
-   *        The key/value store of player options.
-   */
-  constructor(player, options) {
-    super(player, options);
-  }
-
   /**
    * Create the the DOM element for this class.
    *
@@ -77,10 +65,12 @@ class PlayProgressBar extends Component {
  * @private
  */
 PlayProgressBar.prototype.options_ = {
-  children: [
-    'timeTooltip'
-  ]
+  children: []
 };
 
+if (!IE_VERSION || IE_VERSION > 8) {
+  PlayProgressBar.prototype.options_.children.push('timeTooltip');
+}
+
 Component.registerComponent('PlayProgressBar', PlayProgressBar);
 export default PlayProgressBar;

src/js/control-bar/progress-control/progress-control.js

@@ -2,9 +2,8 @@
  * @file progress-control.js
  */
 import Component from '../../component.js';
-import * as Fn from '../../utils/fn.js';
 import * as Dom from '../../utils/dom.js';
-import { throttle, bind } from '../../utils/fn.js';
+import {throttle, bind} from '../../utils/fn.js';
 
 import './seek-bar.js';
 
@@ -27,7 +26,7 @@ class ProgressControl extends Component {
    */
   constructor(player, options) {
     super(player, options);
-    this.handleMouseMove = Fn.throttle(Fn.bind(this, this.handleMouseMove), 25);
+    this.handleMouseMove = throttle(bind(this, this.handleMouseMove), 25);
     this.on(this.el_, 'mousemove', this.handleMouseMove);
 
     this.throttledHandleMouseSeek = throttle(bind(this, this.handleMouseSeek), 25);
@@ -57,6 +56,7 @@ class ProgressControl extends Component {
    */
   handleMouseMove(event) {
     const seekBar = this.getChild('seekBar');
+    const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
     const seekBarEl = seekBar.el();
     const seekBarRect = Dom.getBoundingClientRect(seekBarEl);
     let seekBarPoint = Dom.getPointerPosition(seekBarEl, event).x;
@@ -70,7 +70,9 @@ class ProgressControl extends Component {
       seekBarPoint = 0;
     }
 
-    seekBar.getChild('mouseTimeDisplay').update(seekBarRect, seekBarPoint);
+    if (mouseTimeDisplay) {
+      mouseTimeDisplay.update(seekBarRect, seekBarPoint);
+    }
   }
 
   /**

src/js/control-bar/progress-control/seek-bar.js

@@ -3,6 +3,7 @@
  */
 import Slider from '../../slider/slider.js';
 import Component from '../../component.js';
+import {IE_VERSION} from '../../utils/browser.js';
 import * as Dom from '../../utils/dom.js';
 import * as Fn from '../../utils/fn.js';
 import formatTime from '../../utils/format-time.js';
@@ -177,12 +178,15 @@ class SeekBar extends Slider {
 SeekBar.prototype.options_ = {
   children: [
     'loadProgressBar',
-    'mouseTimeDisplay',
     'playProgressBar'
   ],
   barName: 'playProgressBar'
 };
 
+if (!IE_VERSION || IE_VERSION > 8) {
+  SeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');
+}
+
 /**
  * Call the update event for this Slider when this event happens on the player.
  *