SUM PLAYER

A premium cinematic React video player component. Dark theme, gold accent, smooth animations. Inspired by Apple TV, Netflix, and Prime Video.

Install

npm install sum-player

Usage

import SumPlayer from 'sum-player'
import 'sum-player/dist/sum-player.css'

export default function App() {
  return (
    <SumPlayer
      src="/my-video.mp4"
      poster="/my-poster.jpg"
      title="My Video"
    />
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | src | string | required | Video file URL | | poster | string | - | Thumbnail image | | title | string | - | Video title | | subtitle | string | - | Subtitle line | | createdBy | string | - | Creator name | | season | number | - | Season number | | episode | number | - | Episode number | | subtitles | array | [] | Subtitle tracks | | audioTracks | array | [] | Alternate audio | | onNext | function | - | Called on video end |

Subtitles Format

subtitles={[
  { lang: 'en', label: 'English', src: '/en.vtt' },
  { lang: 'hi', label: 'Hindi', src: '/hi.vtt' },
]}

Audio Tracks Format

audioTracks={[
  { id: 'hindi', label: 'Hindi', src: '/audio-hi.mp3' },
]}

Keyboard Shortcuts

| Key | Action | |-----|--------| | Space or K | Play / Pause | | F | Fullscreen | | M | Mute | | Right Arrow | Forward 10s | | Left Arrow | Rewind 10s | | Up Arrow | Volume up | | Down Arrow | Volume down |

CSS

Import the stylesheet once in your app entry file:

import 'sum-player/dist/sum-player.css'

Features

• Custom HTML5 video player, no browser controls
• Play, Pause, Seek, Volume
• Auto-hiding controls overlay
• Subtitles and captions via VTT files
• Alternate audio track support
• Playback speed control
• Picture in Picture
• Fullscreen and pseudo-fullscreen for mobile
• Touch gestures for brightness and volume
• Pinch to zoom
• Cast support via Remote Playback API
• Keyboard shortcuts
• Loop and Auto-next
• Responsive on mobile, tablet, desktop

License

MIT (c) Sumanth