Video player: Page-wide shortcuts

Shortcuts work while focus is inside the player. globalShortcuts also listens on the page, but never while you type in a field, use a button or have a menu or dialog open. Use it for one player per page.

0:00 / --:--

Press K anywhere on the page to play or pause.

import { Kbd } from "@/components/ui/kbd"
import {
  VideoPlayer,
  VideoPlayerContent,
  VideoPlayerControls,
  VideoPlayerFullscreenButton,
  VideoPlayerPlayButton,
  VideoPlayerSeekBar,
  VideoPlayerSpacer,
  VideoPlayerTime,
  VideoPlayerVolume,
} from "@/components/ui/video-player"

export function VideoPlayerGlobalShortcuts() {
  return (
    <div className="flex w-full max-w-xl flex-col items-center gap-3">
      <VideoPlayer globalShortcuts>
        <VideoPlayerContent
          src="https://media.w3.org/2010/05/sintel/trailer.mp4"
          poster="https://media.w3.org/2010/05/sintel/poster.png"
          aria-label="Sintel trailer"
        />
        <VideoPlayerControls>
          <VideoPlayerSeekBar />
          <VideoPlayerPlayButton />
          <VideoPlayerVolume />
          <VideoPlayerTime />
          <VideoPlayerSpacer />
          <VideoPlayerFullscreenButton />
        </VideoPlayerControls>
      </VideoPlayer>
      <p className="text-sm text-muted-foreground">
        Press <Kbd keys="k" /> anywhere on the page to play or pause.
      </p>
    </div>
  )
}

Add this example

This adds the example as components/examples/video-player/global-shortcuts.tsx, together with the Video player component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/video-player-global-shortcuts.json

To add only the component, follow the Video player installation.

Props in this example

The Video player props this example sets, from the API reference.

VideoPlayer

Prop	Type	Default
`globalShortcuts`Also listen for shortcuts on the whole page.	`boolean`	`false`

Every prop is in the Video player API reference.

Add this example

Props in this example

VideoPlayer

More Video player examples

Related components