Add a Time Display that follows the mouse.

src/css/components/_progress.scss

@@ -97,3 +97,19 @@ specific time ranges that have been buffered */
 .video-js.vjs-no-flex .vjs-progress-control {
   width: auto;
 }
+
+.video-js .vjs-progress-control .vjs-mouse-display {
+  visibility: hidden;
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: calc(50% - 0.15em);
+}
+.video-js .vjs-progress-control .vjs-mouse-display .vjs-mouse-display-bar {
+  visibility: hidden;
+}
+.video-js .vjs-progress-control .vjs-mouse-display .vjs-mouse-display-bar:after {
+  visibility: visible;
+  filter: invert(100%);
+  -webkit-filter: invert(100%);
+}

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

@@ -0,0 +1,43 @@
+/**
+ * @file mouse-display-bar.js
+ */
+import Component from '../../component.js';
+import * as Fn from '../../utils/fn.js';
+import formatTime from '../../utils/format-time.js';
+
+/**
+ * aligns the mouse time display
+ *
+ * @param {Player|Object} player
+ * @param {Object=} options
+ * @extends Component
+ * @class MouseDisplayBar
+ */
+class MouseDisplayBar extends Component {
+
+  constructor(player, options){
+    super(player, options);
+    this.updateDataAttr();
+  }
+
+  /**
+   * Create the component's DOM element
+   *
+   * @return {Element}
+   * @method createEl
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-mouse-display-bar vjs-play-progress',
+      innerHTML: `<span class="vjs-control-text"><span>${this.localize('Progress')}</span>: 0%</span>`
+    });
+  }
+
+  updateDataAttr(time) {
+    this.el_.setAttribute('data-current-time', time);
+  }
+
+}
+
+Component.registerComponent('MouseDisplayBar', MouseDisplayBar);
+export default MouseDisplayBar;

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

@@ -0,0 +1,71 @@
+/**
+ * @file mouse-time-display.js
+ */
+import Component from '../../component.js';
+import MouseDisplayBar from './mouse-display-bar.js';
+import SeekBar from './seek-bar.js';
+import * as Fn from '../../utils/fn.js';
+import formatTime from '../../utils/format-time.js';
+import throttle from 'lodash-compat/function/throttle';
+
+/**
+ * The Mouse Time Display component shows the time you will seek to
+ * when hovering over the progress bar
+ *
+ * @param {Player|Object} player
+ * @param {Object=} options
+ * @extends Component
+ * @class MouseTimeDisplay
+ */
+class MouseTimeDisplay extends SeekBar {
+
+  constructor(player, options) {
+    super(player, options);
+    this.update();
+    player.on('ready', () => {
+      this.on(player.controlBar.progressControl.el(), 'mousemove', throttle(Fn.bind(this, this.handleMouseMove), 50));
+    });
+  }
+
+  /**
+   * Create the component's DOM element
+   *
+   * @return {Element}
+   * @method createEl
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-mouse-display'
+    });
+  }
+
+  getPercent() {
+    return this.newTime / this.player_.duration();
+  }
+
+  handleMouseMove(event) {
+    this.newTime = this.calculateDistance(event) * this.player_.duration();
+
+    this.update();
+  }
+
+  update() {
+    this.updateDataAttr();
+    this.update_();
+  }
+
+  updateDataAttr() {
+    this.mouseDisplayBar.updateDataAttr(formatTime(this.newTime, this.player_.duration()));
+  }
+}
+
+MouseTimeDisplay.prototype.options_ = {
+  children: {
+    'mouseDisplayBar': {}
+  },
+  'barName': 'mouseDisplayBar'
+};
+MouseTimeDisplay.prototype.handleMouseDown = MouseTimeDisplay.prototype.handleMouseMove;
+
+Component.registerComponent('MouseTimeDisplay', MouseTimeDisplay);
+export default MouseTimeDisplay;