r3f-xr-widgets / QuadVideoPlayer

Function: QuadVideoPlayer()

QuadVideoPlayer(allProps): Element

Defined in: src/components/QuadVideoPlayer.tsx:120

A complete video player component with playback controls and XR controller support.

Features:

• Three rendering modes: XRLayer (best performance), VideoXR (auto-sizing), or UIKit (VideoTexture)
• Playback control panel with play/pause, seek (±10s), volume, and progress slider
• Visual action indicators for play/pause/seek/buffering states
• Full XR controller integration with button mapping:
  • A button: Play/pause
  • B button: Toggle controls visibility
  • Right thumbstick right: Seek forward 10s
  • Right thumbstick left: Seek backward 10s
• Auto-hiding controls with smart hover detection (hides after 3s when playing, unless pointer on controls)
• Configurable control panel positioning

Parameters

allProps

QuadVideoPlayerProps

Returns

Element

Examples

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

const video = document.createElement('video')
video.src = '/path/to/video.mp4'
video.load()

<QuadVideoPlayer
  video={video}
  renderer="xrlayer"
  controlPanelTitle="My Video"
/>

<QuadVideoPlayer
  video={video}
  onPlaybackAction={(action) => console.log('Action:', action.type)}
  onControlsToggle={() => console.log('Controls toggled')}
/>

<QuadVideoPlayer
  video={video}
  renderer="videoxr"  // Auto-sizing renderer
  aspectRatio={21/9}  // Ultra-wide
/>

<Fullscreen>
  <QuadVideoPlayer
    video={video}
    renderer="uikit"
  />
</Fullscreen>