@videojs/html 10.0.0-rc.1 → 10.0.0-rc.3

package/docs/concepts/v10-roadmap.md

@@ -1,75 +0,0 @@
-# v10 Roadmap
-
-Timeline and milestones for Video.js v10 rebuild and the future of v8
-
-Video.js v10 is a complete rebuild from the ground up, designed to be more modular, framework-flexible, and aligned with modern web development practices.
-
-## Current versions
-
-### Version 8
-
-*   Maintained with bug fixes and critical security patches only
-*   No new features will be planned
-*   Community contributions still welcome
-*   Documentation available at [legacy.videojs.org](https://legacy.videojs.org)
-
-### Version 9
-
-*   Reserved only for urgent API-breaking changes that cannot be avoided
-
-## March 2026: v10 Beta Release
-
-Wider testing release to the community.
-
-### Core feature parity target
-
-*   Basic control set (play, pause, seek, volume, fullscreen)
-*   Adaptive streaming support via existing community engines
-*   No plugin migrations yet, without plugin author contribution
-
-### What to expect
-
-*   Close to stable, but API changes are still possible
-*   Intended for experimental adoption in real-world projects
-*   Developers encouraged to follow the [installation guide](../how-to/installation.md), try it out, and report issues
-
-## Mid-2026: v10 GA Release
-
-**Stable release** of Video.js v10
-
-### Feature targets
-
-*   Core feature parity with v8 in terms of fundamentals
-*   Feature parity with Media Chrome, Vidstack, Plyr, and Mux Player
-*   Community encouraged to begin full reintegration projects, following the migration guides for [Video.js 8](../how-to/migrate-from-video-js-8.md), [Mux Player](../how-to/migrate-from-mux-player.md), [Plyr](../how-to/migrate-from-plyr.md), and [Media Chrome](../how-to/migrate-from-media-chrome.md)
-*   Plugin ecosystem migration begins in earnest
-
-### Engine development focus
-
-*   Lightweight adaptive streaming
-*   MoQ (Media over QUIC) support
-
-## Late-2026: Feature parity with v8 Contrib
-
-**Extended feature parity** with Video.js “contrib” plugins:
-
-*   Ads integration
-*   Analytics support
-*   Further community plugin migration dependent on contributions
-
-## End-of-life plan for Video.js v8
-
-### Mid-2026
-
-*   v8/v9 moved to “video.js-legacy” repository and package
-*   Documentation preserved at [legacy.videojs.org](https://legacy.videojs.org)
-*   Hosted CDN copies will remain available
-
-### 2027 and beyond
-
-*   Security patches only
-*   Community contributions de-prioritized
-
-* * *
-
-**Want to contribute?** Check out the [v10 repository on GitHub](https://github.com/videojs/v10) to get involved in the rebuild

package/docs/concepts/why-videojs.md

@@ -1,119 +0,0 @@
-# Why Video.js?
-
-The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
-
-Video.js is the open-source video player for the web. It makes web video easy, performant, accessible, and customizable.
-
-Let’s dig into when you’d want to use Video.js, starting with the question we hear most…
-
-## Why not `<video>`?
-
-The native `<video>` tag is great if you can describe your video as an image with a play button. Past that, the gaps show up quickly.
-
-### Cross-browser inconsistency
-
-Chrome, Safari, and Firefox each render the default `<video>` controls differently. You can hide them, but you can’t deeply style or rearrange them. Building UI that matches your product means starting from scratch.
-
-![Chrome's default video controls](/_astro/chrome-default-controls.D2ybhMTL.png)
-
-Chrome
-
-![Safari's default video controls](/_astro/safari-default-controls.CPUt6ekS.png)
-
-Safari
-
-![Firefox's default video controls](/_astro/firefox-default-controls.CYiJeU98.png)
-
-Firefox
-
-### Video interactions
-
-Video often involves more than an MP4 in `src`. Features like thumbnail previews, adaptive bitrate, quality selection, chapters, audio track switching, localized controls, error UI, live-streaming UI, AirPlay, and DRM are *possible* with the video element, but require complex wiring and careful work on maintainability and [accessibility](./accessibility.md).
-
-Video.js provides accessible, composable building blocks for these common playback and streaming features. Other integrations, including ads and emerging media formats, remain under development as version 10 matures.
-
-### Streaming formats and sources
-
-Behind features like adaptive bitrate and quality selection are streaming formats such as HLS and DASH. They split video into segments that a playback engine can select based on bandwidth and preferences. Choose the matching Video.js media component to play these formats across browsers while keeping the surrounding player state and UI consistent.
-
-Of course, your video might not be coming from a `src` like that. It might be provided by a service. However, services like YouTube, Vimeo, and Mux each speak their own API. Video.js gives their media components a consistent interface, so changing providers doesn’t require rebuilding the player around them.
-
-That boundary also gives us a path to future sources such as canvas-based MoQ playback and use cases such as animated GIF replacement without rebuilding the controls around them.
-
-## Why Video.js?
-
-Video.js is built at Mux by the teams behind Video.js, Plyr, Vidstack, and Media Chrome, with contributions from engineers across other player projects. Between us, our projects have served tens of billions of monthly video plays. Most of the choices on this page came from things we got wrong the first time, then the second, then the fifth. We’ve been supporting your edge cases for over a decade. Now we’re shipping the player we always wanted to build.
-
-Let’s dig into some of the design principles that help explain why we built Video.js and why it may be the best choice for your project or team.
-
-### Add only what you need
-
-Most player libraries ship every feature in one bundle, so you carry code you don’t run. If your video doesn’t need a feature like DRM, why ship that code? Video.js turns features into independent, *composable* modules. You hand `createPlayer` the array you actually want, and what you don’t import doesn’t ship.
-
-ts
-
-```
-import { createPlayer, playbackFeature, timeFeature } from '@videojs/html';
-
-const { PlayerElement, PlayerController } = createPlayer({
-  features: [playbackFeature, timeFeature],
-});
-```
-
-- [Learn more about features](./features.md)
-
-Of course, you don’t have to think about every feature you’re going to need if you don’t want to. Pre-built feature bundles are still there if you’d rather not assemble the list by hand.
-
-- [Learn more about presets](./presets.md)
-
-### Framework-native
-
-Many player libraries wrap a single web component for every framework. That works, until you reach the seams: refs you can’t pass through, state that doesn’t reconcile, prop names that aren’t quite React or HTML. Video.js ships idiomatic APIs for its supported frameworks: React components and hooks for React, and custom elements and controllers for HTML.
-
-The player feels like the rest of your app.
-
-React
-
-HTML
-
-```
-import { VideoPlayer, Video, VideoSkin } from '@videojs/react/video';
-import '@videojs/react/video/skin.css';
-
-function MyPlayer() {
-  return (
-    <VideoPlayer>
-      <VideoSkin>
-        <Video src="movie.mp4" />
-      </VideoSkin>
-    </VideoPlayer>
-  );
-}
-```
-
-```
-<script type="module">
-  import '@videojs/html/video/player';
-  import '@videojs/html/video/skin';
-</script>
-
-<video-player>
-  <video-skin>
-    <video src="movie.mp4"></video>
-  </video-skin>
-</video-player>
-```
-
-### Eject and own
-
-Most player libraries draw a line between “configurable through props” and “fork the source.” Cross the line and you’re on your own. Video.js lets you eject any skin and walk away with the source: components in your framework’s language that you can read and change. The skin you ship is yours; the rest of the player keeps working underneath it.
-
-We don’t want to cram every possible player into one configuration API. Packaged skins cover common visual changes. For everything else, eject early and compose the UI you need.
-
-- [Customize skins](../how-to/customize-skins.md#eject-and-edit-a-skin)
-
-### AI-native DX
-
-Documentation aimed at human readers usually doesn’t help an agent. Video.js publishes an `llms.txt` index, ships every docs page as both HTML and Markdown, and has a dedicated guide for building with AI assistants. Drop the player into a Claude or Cursor session and the docs come along for the ride.
-
-- [Build with AI](../how-to/build-with-ai.md)

package/docs/how-to/add-a-background-video.md

@@ -1,223 +0,0 @@
-# Add a background video
-
-Add an accessible background video from an MP4, WebM, HLS, or Mux source
-
-Add a decorative video behind your page content. Start with an MP4 or WebM file, which browsers can play directly. If your video is delivered as HLS, use the HLS or Mux option below.
-
-## Recommended approach
-
-Use [BackgroundVideo](../reference/background-video.md) with an MP4 or WebM URL. Put the video and poster inside a wrapper with `aria-hidden="true"` because both are decorative. Keep the heading, links, and other page content outside that wrapper.
-
-![](https://image.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/thumbnail.webp)
-
-### Build the next great video experience
-
-[Compare source options](#common-variations)
-
-index.html
-
-index.css
-
-index.ts
-
-```
-<section class="add-background-video-html-demo">
-  <div class="add-background-video-html-demo__visual" aria-hidden="true">
-    <img class="add-background-video-html-demo__poster" src="https://image.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/thumbnail.webp" alt="" />
-    <background-video
-      class="add-background-video-html-demo__media"
-      src="https://stream.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/highest.mp4"
-    ></background-video>
-  </div>
-  <div class="add-background-video-html-demo__content">
-    <h3>Build the next great video experience</h3>
-    <a href="#common-variations">Compare source options</a>
-  </div>
-</section>
-```
-```
-.add-background-video-html-demo {
-  position: relative;
-  display: grid;
-  min-height: 18rem;
-  overflow: hidden;
-  color: white;
-  background: black;
-  border-radius: 0.5rem;
-  isolation: isolate;
-}
-
-.add-background-video-html-demo__visual,
-.add-background-video-html-demo__poster,
-.add-background-video-html-demo__media {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.add-background-video-html-demo__visual {
-  pointer-events: none;
-}
-
-.add-background-video-html-demo__visual::after {
-  position: absolute;
-  inset: 0;
-  content: "";
-  background: linear-gradient(90deg, rgb(0 0 0 / 85%), rgb(0 0 0 / 55%));
-}
-
-.add-background-video-html-demo__poster,
-.add-background-video-html-demo__media {
-  display: block;
-  object-fit: cover;
-}
-
-.add-background-video-html-demo__media {
-  --media-object-fit: cover;
-  --media-object-position: center;
-}
-
-.add-background-video-html-demo__content {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  gap: 1rem;
-  place-content: end start;
-  max-width: 28rem;
-  padding: 2rem;
-}
-
-.add-background-video-html-demo__content h3 {
-  margin: 0;
-  font-size: 1.75rem;
-  line-height: 1.1;
-}
-
-.add-background-video-html-demo__content a {
-  width: fit-content;
-  padding: 0.625rem 1rem;
-  color: black;
-  text-decoration: none;
-  background: white;
-  border-radius: 0.25rem;
-}
-
-.add-background-video-html-demo__content a:focus-visible {
-  outline: 0.2rem solid white;
-  outline-offset: 0.2rem;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .add-background-video-html-demo__media {
-    display: none;
-  }
-}
-```
-```
-import '@videojs/html/media/background-video';
-```
-
-## How it works
-
-BackgroundVideo renders the browser’s `<video>` element and starts it muted, looped, autoplaying, and inline. The example puts that video and an empty-alt poster in the `.hero-visual` wrapper. The wrapper is hidden from assistive technology and ignores pointer input, so it does not act like a media player.
-
-The page defines the hero’s size. The video fills that space with `--media-object-fit: cover`, while the poster remains visible until the video paints a frame. The reduced-motion rule hides the video and leaves the poster in place.
-
-Set the size, position, and transforms on the `.hero-visual` wrapper so the poster and video stay together.
-
-## Availability and constraints
-
-*   Use a source the browser can play directly, such as MP4 or WebM.
-*   Safari can play HLS URLs directly. Other browsers cannot do so reliably, so use an HLS variation below when the same `.m3u8` URL must work across browsers.
-*   BackgroundVideo does not create a poster or report analytics. Keep the poster in your page and add analytics only when you need them.
-*   Video.js does not apply a reduced-motion policy for you. The example stops the decoration with `prefers-reduced-motion`.
-*   If the video communicates information, remove `aria-hidden`, give it an accessible name and controls, and use a regular video player.
-
-## Common variations
-
-Choose a variation based on the source you already have:
-
-Need
-
-Use
-
-Cross-browser HLS with a small background-only player
-
-[HlsBackgroundVideo](../reference/hls-background-video.md)
-
-The same background-only player for a Mux HLS URL
-
-[MuxBackgroundVideo](../reference/mux-background-video.md)
-
-### Play an HLS video
-
-HlsBackgroundVideo plays an HLS video without adding controls, audio, or captions. Pass a complete HLS URL through `src`:
-
-bash
-
-```
-pnpm add @videojs/html @videojs/spf
-```
-
-html
-
-```
-<script type="module">
-  import '@videojs/html/media/hls-background-video';
-</script>
-
-<hls-background-video
-  class="hero-media"
-  src="https://media.example.com/hero.m3u8"
-  crossorigin
-></hls-background-video>
-```
-
-Your HLS stream must be unencrypted and use fragmented MP4 video segments, also called fMP4 or CMAF. The component chooses one video size when playback starts and does not switch sizes later. It cannot play older MPEG-TS segments.
-
-### Play a Mux HLS URL
-
-MuxBackgroundVideo is a Mux-named alias for HlsBackgroundVideo. Pass a complete Mux HLS URL, not a bare playback ID or `source` object:
-
-It uses the same `@videojs/spf` installation shown for HlsBackgroundVideo above.
-
-html
-
-```
-<script type="module">
-  import '@videojs/html/media/mux-background-video';
-</script>
-
-<mux-background-video
-  class="hero-media"
-  src="https://stream.mux.com/PLAYBACK_ID.m3u8?max_resolution=720p"
-  crossorigin
-></mux-background-video>
-```
-
-This component does not create a Mux poster, preview thumbnails, or analytics session. Keep the poster in your page and add analytics separately when you need them.
-
-## Troubleshooting
-
-### An HLS URL works in Safari but not another browser
-
-BackgroundVideo hands its `src` to the browser’s `<video>` element. Use HlsBackgroundVideo for a supported fMP4 HLS source, or MuxBackgroundVideo for a Mux HLS URL.
-
-### The video does not fill or follow transforms
-
-Set the size, transforms, and measurements on the wrapper that contains the video and poster. Size the background-video component to fill that wrapper.
-
-### No poster or Mux analytics appear
-
-The background-video components do not provide them. Render an empty-alt poster in the same wrapper as the video, and add analytics separately.
-
-## Related components
-
-*   [BackgroundVideo](../reference/background-video.md)
-*   [HlsBackgroundVideo](../reference/hls-background-video.md)
-*   [MuxBackgroundVideo](../reference/mux-background-video.md)
-
-## Related guides
-
-*   [Add a poster and loading placeholder](./add-a-poster-and-loading-placeholder.md)

package/docs/how-to/add-a-poster-and-loading-placeholder.md

@@ -1,156 +0,0 @@
-# Add a poster and loading placeholder
-
-Set the image shown before playback, then add a lightweight placeholder while it loads
-
-A poster is the image shown before your video plays. There are several places to set one, so work down this list and stop at the first step that fits:
-
-1.  **Let the media provide it.** Some media components create a poster from the source, so there is nothing extra to host or keep in sync.
-2.  **Set `poster` on the player.** With a packaged skin, that is all a static image needs.
-3.  **Take control of the image** when you need a framework image component, a `<picture>` element, or a loading placeholder. The skin renders your image instead of its own.
-4.  **Keep it working in an [ejected skin](./customize-skins.md#eject-and-edit-a-skin).** The player’s `poster` still reaches the Poster component your skin renders, or you can set the image’s source yourself.
-
-## Let the media provide a poster
-
-Some media components choose a poster for you. For example, `MuxVideo` creates one from its playback ID:
-
-Install the HTML façade and the Mux playback adapter:
-
-bash
-
-```
-pnpm add @videojs/html @videojs/mux-video
-```
-
-html
-
-```
-<video-player>
-  <video-skin>
-    <mux-video
-      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
-      poster-time="2"
-      playsinline
-    ></mux-video>
-  </video-skin>
-</video-player>
-<script type="module">
-  import '@videojs/html/video/player';
-  import '@videojs/html/video/skin';
-  import '@videojs/html/media/mux-video';
-</script>
-```
-
-## Set a poster on the player
-
-When the media has no poster of its own, set the player’s `poster` to an image URL:
-
-html
-
-```
-<video-player poster="/poster.jpg">
-  <video-skin>
-    <video src="/video.mp4" playsinline></video>
-  </video-skin>
-</video-player>
-```
-
-If you use a ready-made skin, it includes [Poster](../reference/poster.md) and shows the image automatically. If you build your own UI, add Poster yourself. It hides after the user plays or seeks.
-
-When the player and the media component both choose a poster, the player’s `poster` wins. See [Metadata](../reference/feature-metadata.md) for how the player combines those values.
-
-Posters are decorative by default, with an empty `alt`. If the image communicates something that is not available elsewhere, add `alt` text when you customize the poster image.
-
-## Take control of the poster image
-
-The packaged skins also accept an image of your own, for when a plain `<img>` is not enough:
-
-Add your image to the skin’s `poster` slot. Leave off `src` and Video.js fills in the player’s poster. Provide a `src`, a `srcset`, or `<picture>` sources and Video.js leaves the image alone:
-
-html
-
-```
-<video-player>
-  <video-skin>
-    <video src="/video.mp4" playsinline></video>
-    <picture slot="poster">
-      <source media="(min-width: 1200px)" srcset="/poster-1080.jpg" />
-      <img src="/poster-480.jpg" alt="" />
-    </picture>
-  </video-skin>
-</video-player>
-```
-
-## Add a loading placeholder
-
-A placeholder is a tiny preview that appears while the poster downloads, so a slow poster does not leave the player as empty space. Keep it small enough to include with the page, such as a short data URL. Add it to the customized image from the previous section.
-
-### Add an image to the poster slot
-
-Add an image to the skin’s `poster` slot with the placeholder as its background. Leave off `src`: Video.js adds the poster URL, while the background appears immediately.
-
-html
-
-```
-<video-player poster="/poster.jpg">
-  <video-skin>
-    <video src="/video.mp4" playsinline></video>
-    <img
-      slot="poster"
-      alt=""
-      style="background: url('data:image/webp;base64,…') var(--media-object-position, center) / contain no-repeat"
-    >
-  </video-skin>
-</video-player>
-```
-
-The examples use `contain` for both images. Use `cover` for both when the poster should fill the player. Keeping the same size and position prevents the image from jumping when the poster appears.
-
-## Set the poster in an ejected skin
-
-Ejecting a skin changes nothing about the first two approaches: the player’s `poster`, or the poster the media provides, still reaches the [Poster](../reference/poster.md) component your skin renders.
-
-`<media-poster>` fills the `src` of the image inside it. Give that image a `src`, a `srcset`, or `<picture>` sources instead and Video.js leaves it untouched — set the source at this level when the poster should bypass player state entirely.
-
-For a placeholder, put the background on the image inside `<media-poster>`:
-
-html
-
-```
-<media-poster>
-  <img
-    alt=""
-    style="background: url('data:image/webp;base64,…') var(--media-object-position, center) / contain no-repeat"
-  >
-</media-poster>
-```
-
-## Troubleshooting
-
-### No poster appears
-
-Check that the player has a `poster` or that the media component can create one from its source.
-
-### The final poster never appears
-
-Leave off `src`, `srcset`, and any parent `<picture>` sources when you want Video.js to add the poster URL. If you provide one of those values, Video.js leaves it unchanged.
-
-### The placeholder and poster use different crops
-
-Use the same fit for both images: pair `background-size: contain` with `object-fit: contain`, or use `cover` for both.
-
-### The placeholder adds too much page weight
-
-Use fewer pixels and stronger compression. The placeholder only needs to suggest the poster’s color and shape until the full image appears.
-
-## Related components
-
-*   [Poster](../reference/poster.md)
-
-## Related API
-
-*   [Metadata](../reference/feature-metadata.md)
-
-## Related guides
-
-*   [Customize skins](./customize-skins.md#style-a-packaged-skin)
-*   [Build your own UI component](./build-your-own-component.md)

package/docs/how-to/add-keyboard-shortcuts-and-gestures.md

@@ -1,98 +0,0 @@
-# Add keyboard shortcuts and gestures
-
-Add keyboard shortcuts, tap and double-tap gestures, and on-screen feedback for input actions.
-
-Add keyboard shortcuts and pointer gestures to the player declaratively, with on-screen feedback and screen-reader announcements.
-
-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
-
-Declare shortcuts with `Hotkey` and gestures with `Gesture` inside the player container. Each maps an input to a player action; the prebuilt skins ship a full set.
-
-html
-
-```
-<video-player>
-  <media-container>
-    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsinline></video>
-
-    <media-hotkey keys="Space" action="togglePaused"></media-hotkey>
-    <media-hotkey keys="m" action="toggleMuted"></media-hotkey>
-    <media-hotkey keys="f" action="toggleFullscreen"></media-hotkey>
-    <media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey>
-    <media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey>
-
-    <media-gesture type="tap" action="togglePaused" pointer="mouse" region="center"></media-gesture>
-    <media-gesture type="tap" action="toggleControls" pointer="touch"></media-gesture>
-    <media-gesture type="doubletap" action="seekStep" value="-10" region="left"></media-gesture>
-    <media-gesture type="doubletap" action="seekStep" value="10" region="right"></media-gesture>
-  </media-container>
-</video-player>
-<script type="module">
-  import '@videojs/html/video/player';
-  import '@videojs/html/ui/hotkey';
-  import { GestureElement } from '@videojs/html';
-
-  // Gesture has no standalone define entry; register the element directly.
-  customElements.define(GestureElement.tagName, GestureElement);
-</script>
-```
-
-## How it works
-
-*   `Hotkey` binds keys to player actions: `togglePaused`, `toggleMuted`, `toggleFullscreen`, `toggleSubtitles`, `togglePictureInPicture`, `seekStep`, `volumeStep`, `seekToPercent`, `speedUp`, and `speedDown`. Step actions have shared defaults and accept a custom `value`. The actions call the same feature state actions your components use.
-*   `Gesture` binds pointer input — `tap` and `doubletap` — to the same actions, minus `seekToPercent` and plus `toggleControls`. Bindings are scoped by `pointer` (`mouse` or `touch`) and `region` (`left`, `center`, `right`) — regions split the container’s width, not the rendered video’s — so double-tap-left rewinds while double-tap-right skips forward.
-*   `StatusAnnouncer` announces action results to screen readers, and the input indicator components render transient on-screen feedback (volume level, captions on/off) the way native players do. The prebuilt skins wire these up.
-
-The prebuilt skins bind the conventional set: Space and `k` toggle playback, `m` mutes, `f` fullscreens, `c` toggles captions, `i` toggles picture-in-picture, arrows seek and change volume, `j`/`l` seek in larger steps, `0`–`9` jump to a percentage, and `<`/`>` change speed.
-
-## Availability and constraints
-
-*   Hotkeys listen on the player container by default, so multiple players on a page don’t fight over keys. Pass `target="document"` on a hotkey to make it page-wide — appropriate only when one player owns the page.
-*   Typing is protected: while focus is in an editable field, single-key bindings are skipped automatically. Modifier combinations (for example `Ctrl+Shift+f`) still fire.
-*   Repeatable actions (seeking, volume) fire on held keys; toggle actions don’t repeat.
-*   Touch tap-to-toggle-controls and tap-to-pause are mutually exclusive per pointer type — the skins pause on mouse tap and toggle controls on touch tap, matching platform conventions.
-*   Gestures and the built-in touch handling coordinate through one recognizer; register gestures declaratively instead of adding raw pointer listeners next to them.
-
-## Common variations
-
-### Customize a shortcut
-
-Render your own `Hotkey` set instead of a skin’s: every binding is just an element, so add, remove, or re-key them freely.
-
-### Seek step size
-
-`seekStep` takes its step from `value` — match your content: 5 seconds for short clips, 15 or 30 for long-form.
-
-## Troubleshooting
-
-### Shortcuts don’t fire
-
-Focus is outside the player container. Click the player first, or move focus into it; hotkeys are player-scoped by design.
-
-### Double-tap seek also toggles pause
-
-Regions overlap: keep single-tap `togglePaused` on `center` only, and double-tap seek on `left` and `right`, as in the skin defaults.
-
-### No visual feedback on keyboard actions
-
-The input indicator components render that feedback; use a prebuilt skin or add `StatusAnnouncer` and the indicator components from the skin source to a custom UI.
-
-## Related components
-
-*   [Controls](../reference/controls.md)
-*   [Tooltip](../reference/tooltip.md)
-
-## Related API
-
-*   [Playback feature](../reference/feature-playback.md)
-*   [Volume feature](../reference/feature-volume.md)
-*   [Fullscreen feature](../reference/feature-fullscreen.md)
-
-## Related guides
-
-*   [Automatically show and hide controls](./show-and-hide-controls.md)
-*   [Accessibility](../concepts/accessibility.md)