NOTE: This is not a stable version or a ready library for u to use. If you are using the latest version of Next.js with TailwindCSS it will work just fine, but im just playing with it, so you get it. Under the hood it using zustand to render only where needed and to have the global state. Tho, it will play your videos - full customization like changing buttons is not available.

Usage

npm install react-web-player

//dont forget use client if u are using Next.js
"use client";
import {VideoPlayer, usePlayer} from "react-web-player";

// ok, this working. how to control or customize this now?
<VideoPlayer url='https://files.edgestore.dev/s863vgoz59ii0hbb/videos/_public/e900eb9b-4e3f-4b66-a985-b9f71c4e5eb9.mp4' />;

TailwindCSS

By default player using tailwindcss styling so u need to add this into your tailwind.config.ts file

	content: [
		"./pages/**/*.{ts,tsx}",
		"./components/**/*.{ts,tsx}",
		"./app/**/*.{ts,tsx}",
		"./src/**/*.{ts,tsx}",
		// add this or styles wont work
		"./node_modules/react-web-player/dist/esm/**/*.{js,ts,tsx}",
	],

Props

// <VideoPlayer/> under the hood using native HTML <video>, so you can pass any props that accepts <video> and it will work.
<VideoPlayer
	className='h-64 w-64'
	onEnded={() => console.log("Video ended")}
	autoPlay={true}
	url='https://files.edgestore.dev/s863vgoz59ii0hbb/videos/_public/e900eb9b-4e3f-4b66-a985-b9f71c4e5eb9.mp4'
/>

usePlayer()

// u can use this hook to check/change state of the video.
const player = usePlayer();