shd-player

A high-performance React video player supporting HLS, DASH playback (with quality, audio track, and subtitle track selection), and professional seek-bar thumbnail hover preview (supporting WebVTT, JSON, and DASH manifest tiled thumbnails).

Installation

npm install shd-player

Modular Imports & Optional Dependencies

shd-player is designed to be completely modular to keep your bundle size as small as possible. The heavy streaming libraries (dashjs and hls.js) are configured as optional peer dependencies.

This means NPM will not force you to download them if you don't need them!

Scenario 1: Standard Video (.mp4)

If you only need to play standard MP4 videos, simply install shd-player and import VideoPlayer. Your bundle remains tiny.

import { VideoPlayer } from 'shd-player';

Scenario 2: HLS Streams (.m3u8)

If you need HLS support, manually install hls.js alongside the player:

npm install shd-player hls.js

import { HlsPlayer } from 'shd-player';

You get HLS support without downloading unnecessary DASH bloat.

Scenario 3: DASH Streams (.mpd)

If you need DASH support, manually install dashjs alongside the player:

npm install shd-player dashjs

import { DashPlayer } from 'shd-player';

You get DASH support without downloading unnecessary HLS bloat.

Usage

import React from 'react';
import { VideoPlayer, DashPlayer, HlsPlayer } from 'shd-player';
import 'shd-player/index.css';

function App() {
  return (
    // 1. For MP4/WebM videos:
    <VideoPlayer
      src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_with_multiple_tiled_thumbnails.mpd"
      // log={false}
      // poster="https://example.com/poster.jpg"            // OR local: "/assets/poster.jpg"
      // thumbnails="https://example.com/thumbnails.vtt"    // OR local: "/assets/thumbnails.vtt"
      // subtitles={[
      //   { src: "https://example.com/eng.vtt", label: "English", default: true },
      //   { src: "https://example.com/spa.vtt", label: "Spanish" }
      // ]} 
      // audios={[
      //   { src: "https://example.com/audio1.mp4", label: "English Audio", default: true },
      //   { src: "https://example.com/audio2.mp4", label: "Director's Cut" }
      // ]} 
      // isFullscreen={false}
      // autoPlay={false}
    />

        // { <DashPlayer
        //   src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"
        // />  }

        // <HlsPlayer
        //   src="http://sample.vodobox.com/planete_interdite/planete_interdite_alternate.m3u8"
        // />


        // {/<VideoPlayer
        //   src="https://media.w3.org/2010/05/sintel/trailer.mp4"
        // /> }


  );
}

export default App;

Props Reference

The <VideoPlayer> component accepts the following props:

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | src | string | Required | The source URL of the video. Supports DASH (.mpd), HLS (.m3u8), and progressive video formats (e.g. .mp4). | | poster | string | undefined | The URL of the poster image to display before the video starts playing. | | subtitles | array | [] | An array of subtitle track objects (e.g., [{ src: "/eng.vtt", label: "English", default: true }]). | | thumbnails | string | undefined | The URL of the external WebVTT (.vtt) or JSON file containing sprite sheet coordinates for seek-bar hover preview. | | audios | array | [] | An array of audio track objects (e.g., [{ src: "/audio.mp4", label: "Commentary" }]). | | isFullscreen | boolean | false | If set to true, the player will render in fullscreen style layout. | | autoPlay | boolean | false | Whether the video should automatically play when loaded (autoPlay muted by default). | | log | boolean | false | Whether to automatically log media loading errors ([SHD-Player] Video source failed to load...) and parsing details to the browser console. |