react-web-player

React Web Player

Just a simple React component for playing your videos without any unnecessary rerenders, also giving you an ultimate power to customize/control your Player and its global state.

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();