Comments (5)
@onigetoc I'm having the same issue. Did you find any solution?
from js-spatial-navigation.
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
from js-spatial-navigation.
@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 ;)
from js-spatial-navigation.
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.
from js-spatial-navigation.
try this
https://www.npmjs.com/package/videojs-spatial-navigation
from js-spatial-navigation.
Related Issues (20)
- Issue when navigating in with inner focusable elements
- NPM metadata claims license is ISC (is actually MPL-2.0) HOT 2
- Trigger with smart tv browser the keycode up, down, right and left HOT 2
- Issue while using in my application HOT 3
- Want to use on screen buttons to navigate the screen HOT 1
- I'm an idiot, can someone explain to me what a sectionID is? i've been reading the Documentation back and forth and i dont find anything that explains it.... HOT 1
- DefaultElement is not working properly with selectors HOT 3
- can navigate but not click on dynamic dom eliments HOT 7
- Input text element. When given focus, the left/right arrows are locked. HOT 1
- Suggestion: add preventScroll focus option as an option.
- Can the page be scrolled to the top/bottom if the there are no focusable items at the top/bottom? HOT 1
- Making it work on WebOS for app development HOT 4
- Back Button functionality? HOT 4
- Spatial Navigation in Browser
- Element losing Focus when clicked out of the page
- Prevent user from holding keydown for too long or repeated same key
- Typescript definitions HERE: please help to publish it :)
- WebOS TV with Spatial Nav and HTML Select boxes? HOT 1
- a function to force recompute focusable elements
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from js-spatial-navigation.