1
0
mirror of https://github.com/videojs/video.js.git synced 2025-03-03 15:12:49 +02:00

fix: focus play toggle from Big Play Btn on play (#4018)

If the control bar and playtoggle exist, focus the playtoggle after
triggering play via the keyboard from the Big Play Button.
If the control bar isn't available, then focus the player element.
If play() returns a promise, wait until it resolves to focus,
otherwise, use a setTimeout.

Fixes #2729
This commit is contained in:
Gary Katsevman 2017-02-03 16:30:49 -05:00 committed by GitHub
parent 60bcc99302
commit 4f79e1e299
3 changed files with 34 additions and 1 deletions

View File

@ -34,7 +34,23 @@ class BigPlayButton extends Button {
* @listens click
*/
handleClick(event) {
this.player_.play();
const playPromise = this.player_.play();
const cb = this.player_.getChild('controlBar');
const playToggle = cb && cb.getChild('playToggle');
if (!playToggle) {
this.player_.focus();
return;
}
if (playPromise) {
playPromise.then(() => playToggle.focus());
} else {
this.setTimeout(function() {
playToggle.focus();
}, 1);
}
}
}

View File

@ -998,6 +998,20 @@ class Component {
return this.currentDimension('height');
}
/**
* Set the focus to this component
*/
focus() {
this.el_.focus();
}
/**
* Remove the focus from this component
*/
blur() {
this.el_.blur();
}
/**
* Emit a 'tap' events when touch event support gets detected. This gets used to
* support toggling the controls through a tap on the video. They get enabled

View File

@ -492,6 +492,9 @@ class Player extends Component {
el = this.el_ = super.createEl('div');
}
// set tabindex to -1 so we could focus on the player element
tag.setAttribute('tabindex', '-1');
// Remove width/height attrs from tag so CSS can make it 100% width/height
tag.removeAttribute('width');
tag.removeAttribute('height');