[Mobile] Disable focus on click of Big Play Button

[rtritto]

Description

As default Video.js displays Big Play Button (vjs-big-play-button CSS class).

When vjs-big-play-button is clicked, the vjs-play-control is focused:

2025-01-07.011304.mp4

Related:

• related code: /src/js/big-play-button.js
• Change/disable focus when Big Play Button is clicked #8954
• Play Control Button is focused on click of Big Play Button mister-ben/videojs-mobile-ui#185

Reproduction

https://stackblitz.com/edit/vercel-next-js-dykavrxx

Errors

No response

What version of Video.js are you using?

8.22.0

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Firefox 135

What OS(es) and version(s) does this occur with?

Windows 11

Solution (Draft)

On /src/js/big-play-button.js, use focus only when 'ontouchstart' in globalThis is false.

[gkatsev]

Looks like the last relevant change (#4497) was specifically to skip changing focus for mouse events. Maybe, it should be updated to instead only change focus on keyboard events instead of skipping mouse events.

[gkatsev]

Doing a stricter check for keyboard events is probably fine, but we'd need to confirm that it continues to function for Screen Readers. So, potentially, the easiest is to exclude touch events, unless VoiceOver on iOS, for example, uses touch events. In which case, it gets a bit trickier.

May be easier to have stricter focus styles.