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 {

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';
@@ -77,10 +78,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.
  *