React Video Player

A React video player supporting HLS protocol for VOD / live streaming.

Installation

npm install @halibegic/react-video-player

Usage

VOD Player

import { VodPlayer } from "@halibegic/react-video-player";

function App() {
  return <VodPlayer url="https://example.com/vod.m3u8" />;
}

Prop	Type	Description	Default
`url`	`string`	The vod stream URL	-
`watchHistory`	`{ enabled: boolean; storageKey: string; }`	(Optional) Enable watch history and specify a unique storage key for each vod player instance	-

Example with watchHistory:

import { VodPlayer } from "@halibegic/react-video-player";

function App() {
  return (
    <VodPlayer
      url="https://example.com/vod.m3u8"
      watchHistory={{ enabled: true, storageKey: "video-1" }}
    />
  );
}

Live Player

import { LivePlayer } from "@halibegic/react-video-player";

function App() {
  return (
    <LivePlayer
      url="https://example.com/live.m3u8"
      startDate="2025-09-03T00:00:00Z"
      endDate="2025-10-03T23:59:59Z"
      messages={{
        eventNotStarted: "Live stream još nije počeo. Molimo pričekajte.",
        eventFinished: "Live stream je završen.",
        eventStartingSoon: "Počinje za nekoliko sekundi...",
        live: "Uživo",
      }}
    />
  );
}

Prop	Type	Description	Default
`url`	`string`	The live stream URL	-
`startDate`	`string`	Start date for the live event in ISO 8601 format	-
`endDate`	`string`	End date for the live event in ISO 8601 format	-
`messages`	`{ eventNotStarted: string; eventFinished: string; eventStartingSoon?: string; live?: string; }`	(Optional) Custom messages for event not started, finished, starting soon, and live states	`{ eventNotStarted: "Event has not started yet.", eventFinished: "Event has finished.", eventStartingSoon: "Starting soon...", live: "Live" }`

Example with messages:

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build

# Lint code
npm run lint

License

Note

This is a closed, private development project.