React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

Video

A video player component with HLS streaming support, custom controls, and poster images

Interactive Preview

Video player with poster image and play button overlay

Variants

Different video player configurations

With Poster Image

Without Poster Image

API Reference

Props

videoSrc

string (required) - URL of the video file (MP4)

videoStreamSrc

string (optional) - URL of HLS stream (.m3u8) for adaptive streaming

posterUrl

string (optional) - URL of poster/thumbnail image

videoId

string (optional) - HTML id attribute for the video element (default: 'video-player')

onTimeUpdate

(duration: number, currentTime: number) => void (optional) - Callback fired during playback

className

string (optional) - Additional CSS classes

fcpComplete

boolean (optional) - Whether First Contentful Paint is complete (default: true)

showMask

boolean (optional) - Show poster image overlay before play (default: true)

Features

  • •HLS streaming support with HLS.js for adaptive bitrate
  • •Native HLS support for Safari
  • •Automatic fallback to MP4 if HLS fails
  • •Custom play button overlay with loading state
  • •Poster image support
  • •Native browser controls after play starts
  • •Download prevention (controlsList="nodownload")
  • •Right-click context menu disabled
  • •Progress tracking via onTimeUpdate callback
  • •Error handling with user-friendly messages

Usage Notes

  • •For best performance, provide both videoStreamSrc (HLS) and videoSrc (MP4 fallback)
  • •The component automatically detects browser HLS support
  • •Use onTimeUpdate to track video progress for analytics or course completion
  • •The video is responsive and maintains aspect ratio