web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-08 07:00:10 +02:00
Code Releases Activity

fix(progress control): Fix the video continuing to play when the user scrubs outside of seekbar (#4918)

Browse Source 
Scrubbing inside the seekbar paused the player properly but scrubbing inside the progress control outside the seekbar, the player never paused. This meant that when you scrubbed, if you kept the mouse down but lingered for a moment, the player would continue playing until the mouse moved again.

This fixes it so that the seekbar mousedown and mouseup handlers are called when the progress control mousedown and mouseup handlers are triggered.
This commit is contained in:
Ku Lok Sun 2018-02-13 06:34:44 +08:00 committed by Gary Katsevman
parent 29a8ee1d60
commit a1cef809b3
2 changed files with 34 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/js/control-bar/progress-control/progress-control.js
View File

@ -55,6 +55,8 @@ class ProgressControl extends Component {
*/
handleMouseMove(event) {
const seekBar = this.getChild('seekBar');
if (seekBar) {
const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
const seekBarEl = seekBar.el();
const seekBarRect = Dom.getBoundingClientRect(seekBarEl);
@ -73,6 +75,7 @@ class ProgressControl extends Component {
mouseTimeDisplay.update(seekBarRect, seekBarPoint);
}
}
}
/**
* A throttled version of the {@link ProgressControl#handleMouseSeek} listener.
@ -97,8 +100,10 @@ class ProgressControl extends Component {
handleMouseSeek(event) {
const seekBar = this.getChild('seekBar');
if (seekBar) {
seekBar.handleMouseMove(event);
}
}
/**
* Are controls are currently enabled for this progress control.
@ -157,6 +162,11 @@ class ProgressControl extends Component {
*/
handleMouseDown(event) {
const doc = this.el_.ownerDocument;
const seekBar = this.getChild('seekBar');
if (seekBar) {
seekBar.handleMouseDown(event);
}
this.on(doc, 'mousemove', this.throttledHandleMouseSeek);
this.on(doc, 'touchmove', this.throttledHandleMouseSeek);
@ -175,6 +185,11 @@ class ProgressControl extends Component {
*/
handleMouseUp(event) {
const doc = this.el_.ownerDocument;
const seekBar = this.getChild('seekBar');
if (seekBar) {
seekBar.handleMouseUp(event);
}
this.off(doc, 'mousemove', this.throttledHandleMouseSeek);
this.off(doc, 'touchmove', this.throttledHandleMouseSeek);

4
src/js/control-bar/progress-control/seek-bar.js
View File

@ -179,6 +179,8 @@ class SeekBar extends Slider {
return;
}
// Stop event propagation to prevent double fire in progress-control.js
event.stopPropagation();
this.player_.scrubbing(true);
this.videoWasPlaying = !this.player_.paused();
@ -244,6 +246,8 @@ class SeekBar extends Slider {
handleMouseUp(event) {
super.handleMouseUp(event);
// Stop event propagation to prevent double fire in progress-control.js
event.stopPropagation();
this.player_.scrubbing(false);
/**