React Media 🎬

中文 | English

A beautiful, feature-rich media player component library for React. Includes customizable Video and Audio players with modern UI, dark mode support, and full TypeScript integration.

📚 Documentation

📷 Preview

Video Player

Audio Player

Light Mode	Dark Mode

✨ Features

• 🎥 Video Player - Full-featured video player with custom controls, Picture-in-Picture, and mini player
• 🎵 Audio Player - Beautiful audio player with album art support
• 🌙 Dark Mode - Built-in dark mode support
• 🎨 Customizable - Easily customize primary color and themes
• 📱 Responsive - Mobile-friendly design with touch gestures
• ⌨️ Keyboard Shortcuts - Full keyboard control support
• ♿ Accessible - Screen reader friendly
• 🔧 TypeScript - Complete type definitions included
• ⚡ Lightweight - No external dependencies

📦 Installation

# npm
npm install @peakchao/react-media

# yarn
yarn add @peakchao/react-media

# pnpm
pnpm add @peakchao/react-media

🚀 Quick Start

Import Styles

// App.tsx or index.tsx
import '@peakchao/react-media/style'

Use Components

import { VideoPlayer, AudioPlayer } from '@peakchao/react-media'

function App() {
  return (
    <>
      {/* Video Player */}
      <VideoPlayer
        src="https://example.com/video.mp4"
        poster="https://example.com/poster.jpg"
      />

      {/* Audio Player */}
      <AudioPlayer
        src="https://example.com/audio.mp3"
        title="Song Title"
        artist="Artist Name"
        cover="https://example.com/cover.jpg"
      />
    </>
  )
}

📹 VideoPlayer

A modern video player with all the controls you need.

Props

Prop	Type	Default	Description
src	string	required	Video source URL
poster	string	-	Poster image URL
autoplay	boolean	false	Auto-play video on load
loop	boolean	false	Loop video playback
muted	boolean	false	Mute video by default
controls	boolean	true	Show player controls
primaryColor	string	'#6366f1'	Theme primary color
darkMode	boolean	false	Enable dark mode
keyboardShortcuts	boolean	true	Enable keyboard shortcuts
showPiP	boolean	true	Show Picture-in-Picture button
miniPlayer	boolean	false	Enable mini player mode
backgroundColor	string	'transparent'	Player background color

Keyboard Shortcuts

Key	Action
Space	Play/Pause
← / →	Seek ±5 seconds
↑ / ↓	Volume ±10%
M	Mute/Unmute
F	Toggle Fullscreen

Children (Custom Controls)

<VideoPlayer src="video.mp4">
  {/* Custom controls can be added as children */}
  <button className="rm-btn">Download</button>
  <button className="rm-btn">Share</button>
</VideoPlayer>

🎵 AudioPlayer

An elegant audio player with cover art and track info display.

Props

Prop	Type	Default	Description
src	string	required	Audio source URL
title	string	-	Track title
artist	string	-	Artist name
cover	string	-	Cover image URL
primaryColor	string	'#6366f1'	Theme primary color
darkMode	boolean	false	Enable dark mode

🎨 Theming

function App() {
  return (
    <>
      {/* Custom theme with dark mode */}
      <VideoPlayer
        src="video.mp4"
        primaryColor="#8b5cf6"
        darkMode={true}
      />
    </>
  )
}

🪝 Hooks

useMediaControl

A custom hook for controlling media playback programmatically.

import { useMediaControl } from '@peakchao/react-media'

function App() {
  const { ref, play, pause, toggle, seek, setVolume } = useMediaControl()

  return (
    <>
      <VideoPlayer ref={ref} src="video.mp4" />
      <button onClick={play}>Play</button>
      <button onClick={pause}>Pause</button>
    </>
  )
}

📄 License

MIT License © 2025 peakchao