Shortcuts

Press ? while the player has focus, or use the row in the settings menu, to see every key the player answers to. The list comes from the hotkeys plugin, so it's always the keys that really work. Click the player below and press ?.

"use client";import { captions } from "react-video-kit/captions";import { fullscreen } from "react-video-kit/fullscreen";import { hotkeys } from "react-video-kit/hotkeys";import { pip } from "react-video-kit/pip";import { VideoPlayer } from "react-video-kit/player";import { shortcuts } from "react-video-kit/shortcuts";import { speed } from "react-video-kit/speed";const plugins = [  hotkeys(),  shortcuts(),  fullscreen(),  pip(),  speed(),  captions({ tracks: [{ src: "/media/captions.en.vtt", language: "en", label: "English" }] }),];export default function Shortcuts() {  return <VideoPlayer src="/media/sample-720.mp4" poster="/media/poster.jpg" plugins={plugins} load="visible" />;}

Usage

This plugin needs hotkeys, listed anywhere in plugins.

import { hotkeys } from "react-video-kit/hotkeys";import { VideoPlayer } from "react-video-kit/player";import { shortcuts } from "react-video-kit/shortcuts";const plugins = [hotkeys(), shortcuts()];<VideoPlayer src="/video.mp4" plugins={plugins} />;

Add a key of your own

The bind command on hotkeys adds a key, and returns a function that removes it. The sheet lists it with the rest, under the name you give it, so pass the name in the viewer's language.

"use client";import { useEffect } from "react";import { useCommands } from "react-video-kit";import { hotkeys } from "react-video-kit/hotkeys";function BookmarkKey({ onBookmark }: { onBookmark(): void }) {  const { bind } = useCommands(hotkeys);  useEffect(() => bind("b", "Add a bookmark", onBookmark), [bind, onBookmark]);  return null;}

Open it from your own control

"use client";import { useCommands } from "react-video-kit";import { shortcuts } from "react-video-kit/shortcuts";function ShowKeys() {  const { show } = useCommands(shortcuts);  return <button onClick={show}>Keyboard shortcuts</button>;}

bindings returns the same list as data, for showing it somewhere else.

Behaviour

• A key only appears when the plugin it needs is installed.
• Focus moves into the sheet when it opens, and the arrow keys scroll it. Escape closes it and returns focus to the settings button.
• The controls stay on screen while it's open, and other shortcuts wait until it closes.
• Key caps stay left to right in Arabic and Hebrew, so 0–9 still reads as it does on the keyboard.

API

Options

This plugin takes no options.

State

Read it with useVideoState(shortcuts, (state) => …).

Commands

Call them with useCommands(shortcuts).

Parts