OOratiq

Video Player

Ready

Media player with themed controls.

0:00
0:00

Installation

$ npx @oratiq-js/ui add video-player

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { VideoPlayer } from "@/components/ui/video-player";

Behaviour

  • A themed layer over the native <video> — playsInline, poster, and every video attribute pass through.
  • The transport bar is pinned dir="ltr": media time is a universal LTR notation, like the timestamps themselves.
  • The scrubber is a real slider (role=slider): arrows seek ±5s, Home/End jump, and the position is spoken as '1:24 of 3:20'.
  • Controls fade out during playback and return on hover or focus — keyboard users never lose them.

Props

PropTypeDefaultDescription
src*string—Video source URL.
posterstring—Preview image before playback.

View source on GitHub → components/ui/video-player.tsx