The video player your brand deserves
Lightweight, production-ready, and dependency-free. Supports local files, YouTube, Vimeo, and Bilibili — with playlists, captions, chapters, and analytics callbacks built in.
npm i vplayer-reactZero Dependencies
No external packages required. Pure React with inline styles. Keeps your bundle lean.
Universal Sources
Local video files, YouTube, Vimeo, and Bilibili - all from one unified component.
Brand Configurable
Change accent and icon colors with a single prop. Match your brand perfectly.
Playlist Support
Pass an array of URLs and get automatic Prev / Next controls with seamless auto-advance.
Captions & Chapters
WebVTT subtitle tracks with a CC picker, plus chapter tick marks and labels on the progress bar.
Analytics Callbacks
onBuffer, onMilestone (25/50/75/100%), onPlay, onPause, onEnded — everything you need for video analytics.
Keyboard First
Full keyboard controls scoped to the player. Fully remappable via the keymap prop — or disable any key.
Performance Optimized
Lazy-loaded embeds, metadata-only preload, and no layout shift. Excellent Core Web Vitals.
Accessible
ARIA labels, keyboard navigation, screen reader support, touch scrubbing, and focus management built in.
Interactive Demo
Switch between sources and customize the accent color in real time. The Native MP4 tab demos playlist, chapter markers, and live analytics callbacks.
Track
1 / 2
Buffered
Milestones
Big Buck Bunny
Playlist · Chapter markers · Live buffer & milestone callbacks · Press ? for shortcuts
Brand Accent Color
Quick Start
Install and start using in under a minute.
npm install vplayer-reactimport { VPlayer } from 'vplayer-react';
export default function Page() {
return (
<VPlayer
src="https://example.com/video.mp4"
poster="/poster.jpg"
title="My Video"
accentColor="#e11d48"
iconColor="#ffffff"
aspectRatio="16:9"
/>
);
}// Pass an array of URLs for playlist mode.
// Prev / Next buttons appear automatically.
<VPlayer
src={[
"/episode-1.mp4",
"/episode-2.mp4",
"/episode-3.mp4",
]}
title="My Series"
onNext={() => console.log("advanced")}
onPrev={() => console.log("went back")}
/>// Subtitles / closed captions via WebVTT tracks.
// CC button appears automatically in the control bar.
<VPlayer
src="/video.mp4"
tracks={[
{ src: "/en.vtt", label: "English", lang: "en", default: true },
{ src: "/es.vtt", label: "Español", lang: "es" },
]}
/>// Tick marks on the progress bar; hover for chapter label.
<VPlayer
src="/documentary.mp4"
chapters={[
{ time: 0, label: "Introduction" },
{ time: 120, label: "Act I" },
{ time: 360, label: "Act II" },
{ time: 600, label: "Finale" },
]}
/>// Analytics-ready callbacks — all fire automatically.
<VPlayer
src="/product-demo.mp4"
onBuffer={(pct) => console.log("buffered", pct)}
onMilestone={(pct) => {
// fires once per src at 25 / 50 / 75 / 100 %
analytics.track("video_milestone", { pct });
}}
onPlay={() => analytics.track("video_play")}
onPause={() => analytics.track("video_pause")}
onEnded={() => analytics.track("video_complete")}
/>// Override any key binding or disable it entirely.
import type { VPlayerKeymap } from 'vplayer-react';
const keymap: VPlayerKeymap = {
play: "p", // p → play/pause instead of Space/K
fullscreen: ["f", "F"], // accept both cases
mute: false, // disable M key completely
};
<VPlayer src="/video.mp4" keymap={keymap} />Keyboard Controls
All shortcuts are scoped to the player. They only work when the player has focus, never hijacking the entire page. Every binding can be remapped or disabled via the keymap prop.
Keyboard Shortcuts
Only active when the player is focused (clicked)