In this section, we'll look at how keyboard navigation can be configured with Vidstack Player.
keyTarget property can be used to specify the target on which to listen to key events. The available targets include:
document: key down events will be listened to on the entire document. In the case that multiple players are on the page, only the player that was recently interacted with will receive input.
player: key down events will be listened to on the player itself when it or one of its children were recently interacted with.
keyShortcuts property extends global player key shortcuts. The shortcuts can be specified as a space-separated list of combinations (e.g.,
p Control+Space). This property is loosely modelled after the
aria-keyshortcuts attribute, see the link for more information and tips for picking good shortcuts.
ARIA Key Shortcuts
Keyboard shortcuts can be specified on individual buttons like so:
aria-keyshortcuts is specified on a component, it will take precedence over the global configuration. If it is not set, the player will set the attribute on the component based on the global config so screen readers can announce shortcuts.
👉 See the
aria-keyshortcuts docs for more information.
We strongly recommend not disabling keyboard shortcuts for accessibility reasons, but if required you can disable them like so:
This will not disable standard ARIA keyboard controls for individual components when focused.