ReactNextPlayer

A modern, customizable video player for React & Next.js

npm i reactnextplayer
Star on GitHub
0:00 / 0:00
💻 Current Configuration
<ReactNextPlayer
  src="https://ik.imagekit.io/rfdbp4s3w/Lovable%202.0%20is%20here.%20Multiplayer%20vibe%20coding.%20Smarter%20&%20more%20secure..mp4"
  controls
  autoplay={false}
  muted={false}
  loop={false}
  contextMenu={false}
  className="w-full h-auto rounded-2xl"
  color="#ff0000"
  ambientGlow
/>
⚙️ Props
Customize your player settings

Video source URL (mp4, webm, etc.)

Primary color (progress, volume, etc.)

Enable ambient glow effect

Show/hide player controls

Auto play video on load

Start muted

Loop video when finished

Allow right-click menu

📖 Usage
Quick start example
"use client";
import React from "react";
import {ReactNextPlayer} from "reactnextplayer";

export default function App() {
  return (
    <div style={{ maxWidth: "800px", margin: "0 auto" }}>
      <ReactNextPlayer
        src="/sample-video.mp4"
        poster="/poster-image.jpg"
        autoplay={false}
        controls
        color="#ff4757"
        onPlay={() => console.log("Video started")}
        onPause={() => console.log("Video paused")}
        onEnded={() => console.log("Video ended")}
        onTimeUpdate={(t) => console.log("Current time:", t)}
      />
    </div>
  );
}