Skip to content
FrameworkStyle

Gesture

Map tap and double-tap gestures to player actions

Import

import { Gesture } from '@videojs/react';

Anatomy

<Gesture type="doubletap" region="right" pointer="touch" action="seekStep" value={10} />

Behavior

Gesture is a behavior component: it renders no visible interface. Place it inside a Container to map a tap or doubletap gesture to a player action. A tap must use the primary pointer and complete within 250 milliseconds. When a matching double-tap gesture exists, the first tap waits briefly to see whether a second tap follows.

Use pointer to accept only mouse, touch, or pen input. Use region to divide the container horizontally:

  • Left and right regions split the container into halves.
  • Left, center, and right regions split it into thirds.
  • A center-only region covers the full container.
  • A single left or right region covers that half of the container.

An unregional gesture acts as a fallback outside the active regions. When several registrations match the same gesture, the first registration wins.

Choose a built-in action from the API reference below, or use an application-defined name to call a same-named action on the player store. Pass value as seconds for seekStep or as a volume delta such as 0.05 or -0.05 for volumeStep. Unknown action names do nothing and warn in development.

Accessibility

Gestures supplement visible, keyboard-operable controls; they should never be the only way to perform an action. Gestures ignore pointer activity that begins on interactive controls, links, form fields, menu items, or elements marked with data-interactive.

Examples

Basic Usage

This example follows the common video-player pattern: click to play or pause, double-click the left or right side to seek ten seconds, and double-click the center to toggle fullscreen.

Click: play/pause · Double-click: −10s · fullscreen · +10s

import { Container, createPlayer, Gesture, PlayButton } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';

const { Player } = createPlayer({ features: videoFeatures });

export default function BasicUsage() {
  return (
    <Player>
      <Container className="react-gesture-basic">
        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsInline />
        <p className="react-gesture-basic__instructions">Click: play/pause · Double-click: −10s · fullscreen · +10s</p>
        <PlayButton
          className="react-gesture-basic__button"
          render={(props, state) => (
            <button {...props}>{state.ended ? 'Replay' : state.paused ? 'Play' : 'Pause'}</button>
          )}
        />
        <Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
        <Gesture type="doubletap" action="seekStep" value={-10} region="left" />
        <Gesture type="doubletap" action="toggleFullscreen" region="center" />
        <Gesture type="doubletap" action="seekStep" value={10} region="right" />
      </Container>
    </Player>
  );
}

API Reference

Props

PropTypeDefaultDetails
action*'togglePaused' | 'toggleMuted' | 'tog...—
type*'tap' | 'doubletap'—
disabledboolean—
pointer'mouse' | 'touch' | 'pen'—
region'left' | 'center' | 'right'—
valuenumber—