Play Control Button is focused on click of Big Play Button

[rtritto]

Description

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

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

2025-01-07.011304.mp4

Solutions

1. hide vjs-big-play-button and show a similar Mobile Big Play Button component.

// /videojs-mobile-ui/src/plugin.css
.video-js.vjs-mobile-ui {
+  .vjs-big-play-button {
+    display: none;
+  }
+  // implementation to show Mobile Big Play Button
}

2. replace default behavior of video.js:

• Discussion Change/disable focus when Big Play Button is clicked videojs/video.js#8954

Repro

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

[rtritto]

FYI @mister-ben

[rtritto]

Maybe the focus issue can be fixed in video.js.

[rtritto]

I created discussion videojs/video.js#8954

[mister-ben]

The stackblitz doesn't run, but the video shows Video.js's normal behaviour. Why do you thunk that is an issue? The keyboard focus doesn't change how the touch overlay works.

[rtritto]

The stackblitz doesn't run

Did you wait until "Ready" log? Next you can reload the stackblitz inner page.

Why do you thunk that is an issue?

With the click event (desktop), the Play Control isn't focused.
While, with the touch event (mobile), the Play Control is focused.

In mobile, that focus is confusing and I want to remove it like in the desktop one.