videojs-react-thumbnail-player

A highly customizable, premium Video.js React player component featuring automatic MPEG-DASH & WebVTT timeline thumbnail previews, HLS support, quality selection, subtitles, Picture-in-Picture (PiP), and full keyboard shortcuts.

Features

• 🎨 Modern Premium UI: Fully custom settings menu, control bar, and offline banners with smooth animations and glassmorphism styling.
• 🎞️ Thumbnail Previews: Automatic support for WebVTT and MPEG-DASH thumbnail sprites on the progress bar hover.
• ⚙️ Quality & Speed Selection: Built-in resolution switcher for multi-quality streams (DASH/HLS) and playback rate controls.
• 🗣️ Audio & Subtitles: Multi-audio track selection and native WebVTT subtitle support.
• ⌨️ Keyboard Shortcuts: Native support for Space (play/pause), F (fullscreen), M (mute), arrow keys (seek/volume), and more.
• 📦 Zero-Config Styling: CSS is automatically injected into the bundle (vite-plugin-css-injected-by-js). No need to manually import external stylesheets.

Installation

npm install videojs-react-thumbnail-player @videojs/react hls.js

(Note: @videojs/react and hls.js are required peer dependencies.)

Basic Usage

You can import the universal player (which auto-detects HLS or DASH), or import specialized players to reduce your application's bundle size by excluding heavy dependencies (like hls.js) if you don't need them.

Universal Import (Auto-detect)

import React from "react";
import VideoPlayer from "videojs-react-thumbnail-player";

const App = () => {
  return (
    <VideoPlayer
      src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_with_4_tiles_thumbnails.mpd"
      thumbnailsVtt="thumbnails.vtt"
    />
  );
};

Dash Only Import (Excludes HLS)

import { DashPlayer } from "videojs-react-thumbnail-player";

const App = () => {
  return (
    <DashPlayer src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" />
  );
};

HLS Only Import (Excludes Dash)

import { HlsPlayer } from "videojs-react-thumbnail-player";

const App = () => {
  return (
    <HlsPlayer src="http://sample.vodobox.com/planete_interdite/planete_interdite_alternate.m3u8" />
  );
};

Base Player Import (MP4 / Native only)

import { BasePlayer } from "videojs-react-thumbnail-player";

const App = () => {
  return <BasePlayer src="https://media.w3.org/2010/05/sintel/trailer.mp4" />;
};

Development

To run the local development server with the demo application:

npm install
npm run dev

To build the library bundle for production:

npm run build