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:

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);