@videojs/html 10.0.0-beta.9 → 10.0.0-rc.2

package/docs/how-to/play-live-streams.md

@@ -0,0 +1,116 @@
+# Play live streams
+
+Play live streams with live-edge tracking, DVR windows, and stream-type detection.
+
+Play live streams: show a live badge, jump to the live edge, and support DVR windows when the stream allows scrubbing back.
+
+Note
+
+Using a pre-built [skin](../concepts/skins.md)? It already includes the controls shown here. You may still need the media or player setup in this guide. The component examples are for building your own player UI from individual [components](../concepts/ui-components.md).
+
+## Installation
+
+The examples use HlsJsVideo, so install hls.js with the framework façade:
+
+bash
+
+```
+pnpm add @videojs/html @videojs/hlsjs-video
+```
+
+## Recommended approach
+
+Use the live feature bundle with a streaming media element, and give users a `LiveButton`: it shows whether playback is at the live edge and seeks back to it when activated.
+
+html
+
+```
+<live-video-player>
+  <media-container>
+    <hlsjs-video src="https://your-stream.example.com/live.m3u8" autoplay muted playsinline></hlsjs-video>
+    <media-live-button></media-live-button>
+  </media-container>
+</live-video-player>
+<script type="module">
+  import '@videojs/html/live-video/player';
+  import '@videojs/html/media/hlsjs-video';
+  import '@videojs/html/live-video/ui';
+</script>
+```
+
+The examples use [`HlsJsVideo`](../reference/hlsjs-video.md), but any streaming media component works here, including the smaller default [`HlsVideo`](../reference/hls-video.md). Start with the default and switch engines only if your stream needs it.
+
+The `liveVideoFeatures` bundle mirrors [`videoFeatures`](../concepts/features.md) but adds the live feature and drops playback rate (not meaningful for live), quality selection, and audio-track selection. The live presets also ship skins without a time slider, duration display, or current-time display.
+
+Both bundles are plain arrays, so extending one is a spread:
+
+ts
+
+```
+import { createPlayer, streamTypeFeature } from '@videojs/html';
+import { liveVideoFeatures } from '@videojs/html/live-video';
+
+const { ProviderMixin } = createPlayer({ features: [...liveVideoFeatures, streamTypeFeature] });
+```
+
+## How it works
+
+Two features describe liveness:
+
+*   The [stream type feature](../reference/feature-stream-type.md) reports `streamType`: `'live'`, `'on-demand'`, or `'unknown'`. Streaming media derives it from manifest metadata; plain media elements fall back to duration-based detection. `liveVideoFeatures` does not include it; add `streamTypeFeature` to the player’s features when you need `streamType`.
+*   The [live feature](../reference/feature-live.md) reports two values:
+    *   `liveEdgeStart` is where “live” begins on the timeline. When the playhead is at or past this time, the viewer is watching live; behind it, they’re watching earlier moments of the stream.
+    *   `targetLiveWindow` is how far back the stream lets viewers rewind. `0` means a plain live stream that stays at the edge. `Infinity` means full DVR: rewind as far as the recording goes. `NaN` means the stream isn’t live, or the player doesn’t know yet.
+
+The [time feature](../reference/feature-time.md) adjusts for live playback: `duration` reports the live edge (the end of the seekable range) and keeps growing as the stream continues.
+
+LiveButton reads this state: it renders as an active “go to live” control while playback is behind the edge, seeks to the edge on activation, and goes inactive at the edge. Until the media reports a `seekable` range — before metadata loads, or for non-live media — the button is disabled (`data-disabled`) because there is no edge to seek to. Custom live UIs should treat “behind the edge” and “actionable” as separate states.
+
+## Availability and constraints
+
+*   `liveEdgeStart` and `targetLiveWindow` come from media that implements the live capability — the hls.js-based media elements. With plain media elements, stream type falls back to duration-based detection and `liveEdgeStart` stays `NaN`.
+*   Live playback drifts behind the edge when the network stalls or the tab is backgrounded. Always give users a path back to the edge.
+*   Seeking makes sense only for DVR streams (`targetLiveWindow` of `Infinity`). For standard-latency streams, omit the time slider.
+*   Playback rate control isn’t meaningful for live; `liveVideoFeatures` omits it.
+
+## Common variations
+
+### DVR: let users scrub back
+
+For streams with a DVR window, give users a [TimeSlider](../reference/time-slider.md). The live preset skins don’t include one, so add it to your own UI or [eject the skin](./customize-skins.md#eject-and-edit-a-skin). The slider tracks the sliding window automatically because `duration` follows the live edge.
+
+### Switch UI by stream type
+
+Render live or on-demand controls from `streamType` when one player handles both kinds of content. Add `streamTypeFeature` to the player’s features; `liveVideoFeatures` does not include it:
+
+`<media-live-button>` selects from the live, time, and buffer features and reflects live state. To swap larger parts of the UI on `streamType`, build a provider with [createPlayer](../reference/html-create-player.md) and add `streamTypeFeature` to its features (`<live-video-player>` uses `liveVideoFeatures`, which does not include it), then read `streamType` from the player store through the [player controller](../reference/player-controller.md).
+
+## Troubleshooting
+
+### The live badge never activates
+
+`streamType` isn’t `'live'`. Confirm the player’s features include `streamTypeFeature` (`liveVideoFeatures` does not include it, so `streamType` reads as `undefined`), the source is a live manifest, and it plays through a live-capable media element such as [HlsJsVideo](../reference/hlsjs-video.md).
+
+### Playback keeps falling behind the edge
+
+Network throughput can’t sustain the stream, or the tab was backgrounded. LiveButton returns users to the edge; for lower drift, review the stream’s latency configuration on the encoder side.
+
+### The time slider behaves oddly on a live stream
+
+Standard-latency live streams have no meaningful seek range. Show the slider only for DVR streams (`targetLiveWindow` of `Infinity`).
+
+## Related components
+
+*   [Time slider](../reference/time-slider.md)
+*   [Buffering indicator](../reference/buffering-indicator.md)
+
+## Related API
+
+*   [Live feature](../reference/feature-live.md)
+*   [Stream type feature](../reference/feature-stream-type.md)
+*   [Time feature](../reference/feature-time.md)
+*   [HlsJsVideo](../reference/hlsjs-video.md)
+
+## Related guides
+
+*   [Media sources](../concepts/media-sources.md)

package/docs/how-to/remember-user-preferences.md

@@ -0,0 +1,135 @@
+# Remember user preferences
+
+Persist volume, caption, and quality preferences across sessions by subscribing to player state.
+
+Persist player preferences — volume, muted, captions, quality — so returning users get the setup they left with.
+
+The player doesn’t persist preferences itself today. Player state gives you everything needed to wire persistence to the storage you choose — local storage, your backend, or per-profile settings.
+
+## Recommended approach
+
+Subscribe to the state you want to remember, write it to storage when it changes, and restore it once the store attaches to the media.
+
+html
+
+```
+<video-player>
+  <media-container>
+    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
+  </media-container>
+</video-player>
+<script type="module">
+  import '@videojs/html/video/player';
+  import { selectVolume } from '@videojs/html';
+
+  const STORAGE_KEY = 'player:volume';
+  const player = document.querySelector('video-player');
+  const store = player.store;
+
+  // Local storage can be unavailable (private modes), so guard reads and writes.
+  function readSaved() {
+    try {
+      return JSON.parse(localStorage.getItem(STORAGE_KEY) ?? 'null');
+    } catch {
+      return null;
+    }
+  }
+
+  function save(prefs) {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
+    } catch {
+      // Storage unavailable; skip persistence.
+    }
+  }
+
+  // Restore once the store attaches to the media; actions throw before that.
+  const saved = readSaved();
+  if (saved) {
+    const restore = () => {
+      if (!store.target) return false;
+      const v = selectVolume(store.state);
+      v?.setVolume(saved.volume);
+      // setVolume above zero unmutes, so mute again if that's the saved preference.
+      // At volume zero the player already counts as muted, and toggling would unmute.
+      if (v && saved.muted && saved.volume > 0) v.toggleMuted();
+      return true;
+    };
+    if (!restore()) {
+      const unsubscribe = store.subscribe(() => {
+        if (restore()) unsubscribe();
+      });
+    }
+  }
+
+  // Save on change. subscribe() fires on any state change, so diff what you care about.
+  let last = saved ?? {};
+  store.subscribe(() => {
+    const v = selectVolume(store.state);
+    if (!v || (v.volume === last.volume && v.muted === last.muted)) return;
+    last = { volume: v.volume, muted: v.muted };
+    save(last);
+  });
+</script>
+```
+
+## How it works
+
+*   Player state is the single source of truth: it already reflects every change, whatever caused it — your UI, keyboard shortcuts, native controls, or scripts.
+*   `store.subscribe(callback)` fires on any state change. Notifications are batched per microtask, so rapid changes (a volume drag) produce one callback per tick, which keeps storage writes cheap. There is no per-key subscription on the store: read the state and diff the slice you care about.
+*   In React, `usePlayer(selector)` re-renders only when the selected value changes; pairing it with an effect is the idiomatic save path.
+*   Feature selectors exported by `@videojs/html` and `@videojs/react` (`selectVolume`, `selectTextTrack`, `selectQuality`, and the rest) read a feature’s slice from any store, returning `undefined` when the feature isn’t present.
+*   Restore through the feature actions (`setVolume`, `toggleMuted`, `selectSubtitlesTrack`, `selectVideoRendition`) rather than poking the media element, so state and UI stay consistent.
+*   Actions need an attached media target: calling one before the store attaches throws. Check `store.target` and defer the restore until it is set, as the examples do.
+
+## Availability and constraints
+
+*   Nothing persists by default: volume resets to the media element’s value, captions to the track markup, quality to automatic, on every load.
+*   `setVolume` clamps to 0–1 and unmutes when setting a value above zero; restore volume first, then toggle `muted` back on when the saved preference is muted, as the examples do. Skip the toggle when the saved volume is zero: the player treats volume zero as muted, so toggling would unmute and raise the volume. Don’t compare against store state right after calling an action: notifications batch per microtask, so that state is still stale.
+*   Restore track and quality selections after the media exposes them: track and rendition lists arrive when the media loads, not at player creation. Subscribe and apply when the saved entry appears in the list.
+*   Programmatic volume control is unavailable on some platforms (after attach, iOS Safari reports `volumeAvailability: 'unsupported'`); volume persistence quietly does nothing there.
+*   Local storage is per-origin and can be unavailable (private modes, embedded contexts); guard reads and writes accordingly.
+
+## Common variations
+
+### Persist caption preference
+
+Save the showing track’s `language` (not its generated id, which can change between sources), or `'off'` when the user turns captions off. Restoring is two phases: while the media loads, assert the saved preference whenever the track modes drift from it, because browsers can auto-enable a track of their own during loading. Once the media can play (`canPlay`), treat every change as the user’s choice and save it. A restore that re-runs forever would keep overriding the user; one that runs only once can get overridden by the browser.
+
+Apply the same pattern with `selectTextTrack(store.state)` inside `store.subscribe`: until `canPlay` is true, re-apply the saved preference by passing the matching track’s `id` (or `'off'`) to `selectSubtitlesTrack` whenever the modes drift; afterward, save the showing track’s `language`, or `'off'` when none is showing, on every change.
+
+### Persist to your backend
+
+Swap `localStorage` for an API call; the subscription pattern is identical. Debounce writes beyond the built-in microtask batching if your storage is remote.
+
+## Troubleshooting
+
+### The saved volume doesn’t apply
+
+Restore runs before the store attaches, or the platform doesn’t allow programmatic volume (check `volumeAvailability`). Apply after `store.target` is set, as in the examples.
+
+### The saved caption track doesn’t select
+
+The track list wasn’t loaded yet when you restored, or you saved a generated track id instead of a stable property like `language`. React to `textTrackList` changes and match on language.
+
+### Storage writes fire constantly while dragging the volume slider
+
+Notifications batch per microtask, but a drag still produces many ticks. Debounce the write if the churn matters for your storage target.
+
+## Related components
+
+*   [Volume slider](../reference/volume-slider.md)
+*   [Captions radio group](../reference/captions-radio-group.md)
+*   [Quality radio group](../reference/quality-radio-group.md)
+
+## Related API
+
+*   [usePlayer](/docs/framework/react/reference/use-player)
+*   [useStore](/docs/framework/react/reference/use-store)
+*   [Volume feature](../reference/feature-volume.md)
+*   [Text track feature](../reference/feature-text-tracks.md)
+
+## Related guides
+
+*   [Show captions and subtitles](./show-captions-and-subtitles.md)
+*   [Add a quality selector](./add-quality-selector.md)

package/docs/how-to/self-host-the-player.md

@@ -0,0 +1,153 @@
+# Self-host the player
+
+Serve the Video.js HTML player from your own origin for offline, air-gapped, or restricted-network deployments
+
+By default, the [installation](./installation.md) flow loads the player from a public CDN. For offline, air-gapped, or locked-down deployments, you can serve everything from your own origin instead.
+
+## Recommended approach
+
+Bundle a single file: install the package, put the player’s imports into an entry file, then let any bundler produce one self-contained module you can host anywhere. For the default video player, that’s:
+
+player.js
+
+```
+import '@videojs/html/video/player';
+import '@videojs/html/video/skin';
+```
+
+bash
+
+```
+npm install @videojs/html
+npx esbuild player.js --bundle --format=esm --minify --sourcemap --outfile=public/player.js
+```
+
+Load the output with `type="module"`:
+
+html
+
+```
+<script type="module" src="/player.js"></script>
+```
+
+You get one file (plus a sourcemap), no runtime requests to a CDN, and only the features you import. Any bundler works (Vite, Rollup, webpack) as long as the output stays ESM.
+
+## Availability and constraints
+
+*   HLS and other non-default media need their own module on top of the player, and your self-hosted build has to include it. When bundling HlsJsVideo, install `@videojs/hls.js` with `@videojs/html`, add `import '@videojs/html/media/hlsjs-video';` to the entry file, and use `<hlsjs-video>` for the `.m3u8` source. The smaller default HlsVideo uses `@videojs/spf`; DASH, Shaka, Vimeo, and Wistia use `@videojs/dash.js`, `@videojs/shaka`, `@videojs/vimeo`, and `@videojs/wistia`. When mirroring the CDN package, adapters are already bundled: serve the matching media file and add its script tag, such as `<script type="module" src="/videojs/media/hlsjs-video.js"></script>`.
+
+## Common variations
+
+Bundle a single file when you already build your front end. Download the release archive when you install outside npm, like Composer or Drupal. Mirror the CDN files when you want the published layout as-is.
+
+### Download the release archive
+
+[Video.js releases](https://github.com/videojs/v10/releases) provide a `videojs-cdn-<version>.zip` (and a `.tar.gz`) holding the prebuilt player. Use it when your deployment installs dependencies outside npm, or when you want a versioned artifact to vendor into your own repository.
+
+Unpack it into whatever your server treats as static files:
+
+bash
+
+```
+VIDEOJS_VERSION=10.0.0-rc.2
+curl -fLO "https://github.com/videojs/v10/releases/download/@videojs/cdn@${VIDEOJS_VERSION}/videojs-cdn-${VIDEOJS_VERSION}.zip"
+unzip "videojs-cdn-${VIDEOJS_VERSION}.zip" -d public/
+```
+
+Then point a script tag at the player you want:
+
+html
+
+```
+<script type="module" src="/videojs-cdn-10.0.0-rc.2/video.js"></script>
+```
+
+The archive holds the same production bundles the CDN serves, minus sourcemaps and development builds. Every path inside it is relative, so it runs from any origin with no outbound requests. `SHA256SUMS` on the release verifies the download.
+
+For Composer-based projects such as Drupal, declare the archive as a package:
+
+composer.json
+
+```
+{
+  "repositories": [
+    {
+      "type": "package",
+      "package": {
+        "name": "videojs/cdn",
+        "version": "10.0.0-rc.2",
+        "type": "drupal-library",
+        "dist": {
+          "type": "zip",
+          "url": "https://github.com/videojs/v10/releases/download/@videojs/cdn@10.0.0-rc.2/videojs-cdn-10.0.0-rc.2.zip"
+        }
+      }
+    }
+  ],
+  "require": {
+    "videojs/cdn": "10.0.0-rc.2"
+  }
+}
+```
+
+Composer strips the archive’s top-level directory, so the player lands directly in your libraries path.
+
+### Mirror the prebuilt CDN files
+
+To skip the bundler, copy the prebuilt CDN bundle to your server as-is.
+
+Copy the whole package directory
+
+The CDN entry files like `video.js` and `media/hlsjs-video.js` are not standalone. They import shared, content-hashed chunks (`default-*.js`, `ui-*.js`, and more) that live alongside them. Copying a single file breaks at runtime, so mirror the entire `@videojs/cdn` directory and keep its layout intact.
+
+bash
+
+```
+npm install @videojs/cdn
+mkdir -p public
+cp -r node_modules/@videojs/cdn public/videojs
+```
+
+Then point the script tag at your copy instead of the CDN:
+
+html
+
+```
+<script type="module" src="/videojs/video.js"></script>
+```
+
+The file name matches your player: `video.js`, `audio.js`, `background.js`, and so on. Every option is present in the package directory you copied.
+
+Hashed chunk names change between releases, so re-copy the directory whenever you upgrade `@videojs/cdn`.
+
+## Stylesheets
+
+Every bundle inlines its own CSS and applies it when the custom element upgrades, so a mirrored copy renders correctly with no extra `<link>`. Alongside the bundles, `@videojs/cdn` publishes those styles as separate files for the one thing a script cannot do: style the page before that upgrade happens.
+
+`global.css` holds the light-DOM rules — `display: contents` on `<video-player>`, and the box the media and poster stretch to fill. Link it ahead of the bundle and the player reserves its space on first paint instead of on upgrade:
+
+html
+
+```
+<link rel="stylesheet" href="/videojs/global.css" />
+<script type="module" src="/videojs/video.js"></script>
+```
+
+The background preset keeps its light-DOM rules in `background.css` instead.
+
+The rest — `video.css`, `audio.css`, one per skin, and the `shared.css` they build on — are shadow-DOM styles. No skin exposes a `::part`, so linking these from the document has no effect. They apply only inside a shadow root, which each skin builds and styles itself.
+
+Declarative shadow DOM
+
+A skin skips building and styling its shadow root when one already exists, so markup that ships a `<template shadowrootmode="open">` has to carry the matching stylesheet inside that template. Today only `background-video-skin` exposes its template for server rendering; the other skins keep theirs in JavaScript, so this path needs a hand-written template.
+
+## Troubleshooting
+
+### The player UI renders but the video never loads
+
+There is no console error. The media module for your format isn’t part of your self-hosted build. Add the media import to your bundle entry file, or serve the media file and its script tag alongside the player, as described in [Availability and constraints](#availability-and-constraints).
+
+## Related guides
+
+*   [Installation](./installation.md)
+*   [Media sources](../concepts/media-sources.md)

package/docs/how-to/show-and-hide-controls.md

@@ -0,0 +1,195 @@
+# Automatically show and hide controls
+
+Show controls while the user is active, hide them during playback, and toggle them by touch.
+
+Show controls while the user is active, fade them out during undisturbed playback, and bring them back on interaction.
+
+Note
+
+Using a pre-built [skin](../concepts/skins.md)? It already includes the controls shown here. You may still need the media or player setup in this guide. The component examples are for building your own player UI from individual [components](../concepts/ui-components.md).
+
+## Recommended approach
+
+Wrap your control UI in [Controls](../reference/controls.md). It reads controls visibility from player state, so the whole control bar shows and hides as one unit.
+
+Play Pause
+
+index.html
+
+index.css
+
+index.ts
+
+```
+<video-player class="video-player">
+  <media-container>
+    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoplay muted playsinline loop></video>
+
+    <media-controls>
+      <media-controls-backdrop class="controls-backdrop"></media-controls-backdrop>
+      <media-controls-content class="media-controls">
+        <media-controls-group class="controls-group" aria-label="Playback controls">
+          <media-play-button class="button media-play-button">
+            <span class="paused">Play</span>
+            <span class="playing">Pause</span>
+          </media-play-button>
+          <media-time class="time" type="current"></media-time>
+        </media-controls-group>
+      </media-controls-content>
+    </media-controls>
+  </media-container>
+</video-player>
+```
+```
+.video-player media-container {
+  position: relative;
+  display: block;
+}
+
+.video-player media-container video {
+  width: 100%;
+}
+
+.media-controls {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  padding: 12px;
+  pointer-events: none;
+  transition: opacity 0.25s;
+}
+
+.controls-backdrop {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 45%);
+  opacity: 1;
+  transition: opacity 0.35s;
+}
+
+.controls-backdrop:not([data-visible]),
+.media-controls:not([data-visible]) {
+  opacity: 0;
+}
+
+.controls-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  pointer-events: auto;
+}
+
+.time {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  padding-block: 8px;
+  padding-inline: 16px;
+  font-size: 14px;
+  color: black;
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+}
+
+.button {
+  padding-block: 8px;
+  padding-inline: 16px;
+  font-size: 14px;
+  color: black;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+}
+
+.button .paused,
+.button .playing {
+  display: none;
+}
+
+.media-play-button[data-paused] .paused {
+  display: inline;
+}
+
+.media-play-button:not([data-paused]) .playing {
+  display: inline;
+}
+```
+```
+import '@videojs/html/video/player';
+import '@videojs/html/ui/container';
+import '@videojs/html/ui/controls';
+import '@videojs/html/ui/play-button';
+import '@videojs/html/ui/time';
+```
+
+## How it works
+
+The [controls feature](../reference/feature-controls.md) tracks activity on the player container:
+
+*   `userActive` is `true` while the user interacts — pointer movement, keyboard input, or focus — and flips to `false` after two seconds of inactivity.
+*   `controlsVisible` derives from activity and playback: controls stay visible while paused or while a remote playback session is connecting or connected, regardless of idle state.
+*   `toggleControls()` flips visibility, for wiring to custom triggers.
+
+On touch devices, a tap on the media toggles the controls instead of relying on pointer movement, and mid-gesture movement doesn’t flicker visibility.
+
+The feature needs the player container for activity tracking; without a container it stays inactive and warns in development.
+
+## Availability and constraints
+
+*   Activity tracking listens on the player container, so controls placed outside it don’t keep the player “active” — put control UI inside the container.
+*   Keyboard focus counts as activity: controls stay reachable for keyboard and assistive-technology users while focus is inside them.
+*   Touch and mouse behave differently by design — mouse movement shows controls, touch requires a tap. Test both.
+*   The idle delay is fixed at two seconds.
+
+## Common variations
+
+### Always-visible controls
+
+Set `visibility="always"` on [Controls](../reference/controls.md). The controls stay visible and report the user as active while the feature keeps tracking activity for anything else that needs it. The packaged audio skins use this mode.
+
+html
+
+```
+<media-controls visibility="always">
+  <media-controls-content class="controls">...</media-controls-content>
+</media-controls>
+```
+
+### Custom show/hide styling
+
+Controls hide by state, so you own the transition. Style the visible and hidden states in CSS — fade, slide, or scale — driven by the component’s rendered state rather than re-implementing the idle timer.
+
+## Troubleshooting
+
+### Controls never hide
+
+The media is paused (controls intentionally stay visible), a remote playback session is active, an open menu or popover holds a controls lock, or something keeps triggering activity — for example a focused element inside the container receiving repeated events.
+
+### Controls don’t come back on touch
+
+A tap on the media toggles controls. If a custom overlay covers the media and swallows pointer events, taps never reach the container; let pointer events pass through decorative overlays.
+
+### Controls flicker on Android while tapping
+
+Use the skin gestures (`tap` with the `toggleControls` action) rather than adding your own tap handlers next to the built-in behavior; competing handlers invert each other. See [Add keyboard shortcuts and gestures](./add-keyboard-shortcuts-and-gestures.md).
+
+## Related components
+
+*   [Controls](../reference/controls.md)
+*   [Player container](../reference/player-container.md)
+
+## Related API
+
+*   [Controls feature](../reference/feature-controls.md)
+
+## Related guides
+
+*   [Add keyboard shortcuts and gestures](./add-keyboard-shortcuts-and-gestures.md)
+*   [Accessibility](../concepts/accessibility.md)