Keyboard shortcuts

By default, Media Controller has keyboard shortcuts that will trigger behavior when specific keys are pressed when the focus is inside the Media Controller. The following controls are supported:

KeyName to turn offBehavior
SpacenospaceToggle Playback
knokToggle Playback
mnomToggle mute
fnofToggle fullscreen
cnocToggle captions or subtitles, if available
ArrowLeftnoarrowleftSeek back 10s
ArrowRightnoarrowrightSeek forward 10s

If you are implementing an interactive element that uses any of these keys, you can stopPropagation in your keyup handler. Alternatively, you can add a keysUsed property on the element or a keysused attribute. The values are those that match the key property on the KeyboardEvent. You can find a list of those values on mdn. Additionally, since the DOM list can’t have the Space key represented as " ", we will accept Space as an alternative name for it. Example (keysused attribute):

<media-time-range keysused="ArrowLeft ArrowRight Space"></media-time-range>

Example (keysUsed property):

class MyInteractiveElement extends globalThis.HTMLElement {
  get keysUsed() {
    return ['Enter', ' '];

A hotkeys property is available on the Media Controller. It is an AttributeTokenList, which is based on the DOMTokenList API (like classList). This allows you to add and remove which shortcuts are allowed.

If you have a live player with no DVR functionality, you might want to turn off the seeking hotkeys. You can do this programmatically like so:

const mc = document.querySelector('media-controller');
mc.hotkeys.add('noarrowleft', 'noarrowright);