i need some help to make the Videojs video player buttons navigable

[onigetoc]

I create a website that can be navigable from the keyboard.

Everything work well with my keyboard navigation with this navigation plugin but after hours and days i still can't navigate these Video js buttons and i don't understand why.

I did a little example here one Codepen and it still not working. https://codepen.io/onigetoc/pen/MWBowmg

I use the videojs seek plugin to add a forward and rewind buttons. I will also use the videojs hotkeys plugin but for now, i'm just trying to make my player navigable with the arrow keyboard.

I absolutely want to use the Spatial Navigation plugin.

[jonybekov]

@onigetoc I'm having the same issue. Did you find any solution?

[TheGuy2003]

I create a website that can be navigable from the keyboard.

Everything work well with my keyboard navigation with this navigation plugin but after hours and days i still can't navigate these Video js buttons and i don't understand why.

I did a little example here one Codepen and it still not working. https://codepen.io/onigetoc/pen/MWBowmg

I use the videojs seek plugin to add a forward and rewind buttons. I will also use the videojs hotkeys plugin but for now, i'm just trying to make my player navigable with the arrow keyboard.

I absolutely want to use the Spatial Navigation plugin.

if you want to use this you will have two options

one create custom buttons using the javascript player api for video js or use the body eliment to get the player controls as they are dynamically loaded

[onigetoc]

@jonybekov Hi, i did my own simple key navigation for videojs with javascript. I'm on my phone right now and i can't share my code right now. I will do it tomorow.

If i forget just ask me again ;)

[onigetoc]

Ok, I updated my CodePen demo to make it work and navigate Videojs control bar buttons. https://codepen.io/onigetoc/pen/NWLaJwR?editors=1010 it's not perfect. But it works better on my project because i'm using the Videojs plugin 'hotkeys' and it manages better the focus when the user is active or inactive. https://github.com/ctd1500/videojs-hotkeys

At Videojs 'playing' it automatically set to the play button on ready. If you navigate UP you will loose button focus. If you navigate Down it will focus the first button.

If the video is not showing the player button SN cannot find the control button. I think it may be why SN can work. we should find a way to be sure when the control bar is in view and may be doing a makeFocusable at the right moment at the right place like:

        SN.makeFocusable();
        // SN.focus('playerview'); // FOR OTHER PURPOSE I NEED THIS
        SN.focus("playcontrols"); // FOCUS ON THE PLAY BUTTON AT PLAYING

By default, Videojs show the control-bar when user is active (or touch a keyboard key);

May be if it's done the right way there's no need for my control bar button navigation with javascript.

You can mix SN for your need. like auto focus the player on load ect. It may need a delay or the player be ready. In my example, i used player.one( Because i want to load it only one time for my need.

I used spatial-navigation to work with the down keyword and the player should be focused. like i said the Videojs plugin 'hotkeys' do the job to focus the right thing because i'm not sure what it focus exactly. I tryed myself but did find out.

Like i said, Spatial-Navigation is used to focus the main player and should be set (add) and you can do something to focus the play button on arrow key Down.

It's seem that until the new audio have to be muted on autoplay on browser now, Videojs do some weird things. On my project i'm doing a promise that will play the video and load it a litle bit latter after user navigate and i can play video without the user click on it. the Videojs plugin 'hotkeys' automatically focus where it should but i didn't find out yet even if i looked at the code.

I don't know why but if you click on the video or big play button it will loose focuse and we may need to force focus where we want. The other problem is the control-bar is inside the player and i don't know if we can focus inside and outside the right way.

[kyawswarthwin]

try this

https://www.npmjs.com/package/videojs-spatial-navigation