r3f-xr-widgets / useVideoXRControls

Function: useVideoXRControls()

useVideoXRControls(options): UseVideoXRControlsReturn

Defined in: src/hooks/useVideoXRControls.ts:97

Hook for controlling video playback via XR controller buttons

Provides a pre-configured button mapping for video playback control in XR:

• A button: Play/pause toggle
• B button: Toggle controls panel visibility
• Thumbstick right: Seek forward 10 seconds
• Thumbstick left: Seek backward 10 seconds

Built on top of useXRButtons with fixed button assignments optimized for video playback. Commonly used with EquirectPlayer and other video components.

Parameters

options

UseVideoXRControlsOptions = {}

Configuration with video element and callbacks

Returns

UseVideoXRControlsReturn

Object with targetRef, pointer handlers, and controls toggle ref

Examples

import { useVideoXRControls } from 'r3f-xr-widgets'

function VideoScene() {
  const videoRef = useRef<HTMLVideoElement>(null)
  const { targetRef, onPointerEnter, onPointerLeave } = useVideoXRControls({
    video: videoRef.current,
    onAction: (action) => console.log('Action:', action.type)
  })

  return (
    <>
      <video ref={videoRef} src="/video.mp4" />
      <mesh
        ref={targetRef}
        onPointerEnter={onPointerEnter}
        onPointerLeave={onPointerLeave}
      >
        <sphereGeometry args={[10, 64, 64]} />
        <meshBasicMaterial>
          <videoTexture attach="map" args={[videoRef.current]} />
        </meshBasicMaterial>
      </mesh>
    </>
  )
}

const controls = useVideoXRControls({
  video: videoElement,
  requirePointerOnTarget: false
})

See

• useXRButtons for the underlying button detection hook
• EquirectPlayer for a complete video player implementation