@wurathh/player

React wrapper for @wurathh/player-core.

Installation

bun add @wurathh/player @wurathh/player-core

Styles

import "@wurathh/player/styles.css";

Usage

The React wrapper now supports direct top-level props, so you can use it like a normal React component.

import { VideoPlayer } from "@wurathh/player";
import "@wurathh/player/styles.css";

export function App() {
  return (
    <VideoPlayer
      src="https://example.com/video.mp4"
      poster="https://example.com/poster.jpg"
      autoPlay={false}
      onReady={() => {
        console.log("ready");
      }}
      onPlay={() => {
        console.log("playing");
      }}
      onPause={() => {
        console.log("paused");
      }}
    />
  );
}

Player Instance

You can access the underlying WPlayer instance through ref or onInstance.

import { useRef } from "react";

import { VideoPlayer } from "@wurathh/player";
import type { WPlayer } from "@wurathh/player-core";

export function App() {
  const playerRef = useRef<WPlayer | null>(null);

  return (
    <VideoPlayer
      ref={playerRef}
      src="https://example.com/video.mp4"
      onInstance={(player) => {
        console.log("instance", player);
      }}
    />
  );
}

Subtitles And Config

<VideoPlayer
  src="https://example.com/video.mp4"
  subtitles={[
    {
      src: "https://example.com/subtitles/en.vtt",
      srcLang: "en",
      label: "English",
      default: true,
    },
  ]}
  config={{
    i18n: {
      locale: "auto",
      numberingSystem: "auto",
      translations: {},
      customLocales: {},
    },
  }}
/>

Backward Compatibility

The old options prop still works if you want to pass the full player config as one object.

<VideoPlayer
  options={{
    src: "https://example.com/video.mp4",
    onPause: () => {
      console.log("paused");
    },
  }}
/>

Notes

• Direct props are the recommended API for new React usage.
• className, id, and style are applied to the wrapper container element.
• All core player callbacks such as onReady, onPlay, onPause, onTimeUpdate, and onError are supported as component props.