Player Library

The @elcto/player package provides a React video player component built on Shaka Player, supporting modern streaming formats and extensive customization.

Features

• Streaming Support - HLS, MPEG-DASH, Smooth Streaming
• Multiple Formats - MP4, WebM, MPEG-TS, CMAF
• Codec Support - H.264, H.265/HEVC, VP8, VP9, AV1
• DRM - Widevine, PlayReady, FairPlay (via native HLS)
• Resume Playback - Save/restore position via localStorage (with cookie consent)
• Theming - Full customization using design tokens
• SSR Safe - Dynamic import with loading states
• Accessibility - Keyboard navigation, screen reader support

Installation

Add the package to your webapp:

{
  "dependencies": {
    "@elcto/player": "workspace:*"
  }
}

Setup

Import Styles

Add to your globals.css:

@import "@elcto/player/styles";

Configure Next.js

Update next.config.ts:

const nextConfig: NextConfig = {
  transpilePackages: ['@elcto/ui', '@elcto/api', '@elcto/player'],
};

Quick Start

import { VideoPlayer } from "@elcto/player";

function MyPage() {
  return (
    <VideoPlayer
      src="https://storage.example.com/videos/demo.mp4"
      poster="https://storage.example.com/images/poster.jpg"
      controls
      autoPlay={false}
    />
  );
}

Package Exports

// Main component
import { VideoPlayer } from "@elcto/player";

// Hooks
import { useVideoPosition } from "@elcto/player/hooks";

// Styles
import "@elcto/player/styles";

Why a Separate Package?

The player library is separate from @elcto/ui to:

1. Keep UI lightweight - Shaka Player adds significant bundle size
2. Optional dependency - Not all apps need video playback
3. Focused testing - Video playback requires specialized testing
4. Clear boundaries - Separates presentation from media handling

Peer Dependencies

• react >= 18
• next >= 14
• @elcto/cookies-consent (for resume playback feature)

Supported Formats

Type	Formats
Streaming	MPEG-DASH (.mpd), HLS (.m3u8), Smooth Streaming
Containers	MP4, WebM, MPEG-TS, CMAF
Video Codecs	H.264, H.265/HEVC, VP8, VP9, AV1
Audio Codecs	AAC, MP3, Opus, Vorbis, AC-3, FLAC
DRM	Widevine, PlayReady, FairPlay (via native HLS)