Next Js Player 🚀

"next-js-player" is video player that supports both react and next js(i.e pages router and app router)

***Follow all the instructions given below to use next-js-player***

Installation

1. Run the command below to install next-js-player

npm i next-js-player

or

yarn add next-js-player

2. Run the command below to install react-icons

npm i react-icons

or

yarn add react-icons

3. Run the command below to install tailwindcss, if not installed

npm install -D tailwindcssnpx tailwindcss init

or

yarn add -D tailwindcssyarn tailwindcss init

Configurations

4. Add the below css to the globals.css (for Next Js) or to the index.css/App.css (for React Js)

@tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; } .player-controls { bottom: -4rem !important; } .video-wraper:hover > .player-controls { bottom: -15px !important; } ::-webkit-media-controls { display: none !important; } video::-webkit-media-controls { display: none !important; } video::-webkit-media-controls-enclosure { display: none !important; }

For Next Js:

5. Add the configs below to install tailwindcss.config.js

/** @type {import('tailwindcss').Config} */module.exports = {content: ["./src/pages/**/*.{js,ts,jsx,tsx,mdx}","./src/components/**/*.{js,ts,jsx,tsx,mdx}","./src/app/**/*.{js,ts,jsx,tsx,mdx}","./node_modules/next-js-player/**/*.{js,ts,jsx,tsx,mdx}",],theme: {extend: {backgroundImage: {"gradient-radial": "radial-gradient(var(--tw-gradient-stops))","gradient-conic":"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",},},},plugins: [],};

For React Js:

5. Add the configs below to install tailwindcss.config.js

/** @type {import('tailwindcss').Config} */module.exports = {content: ["./src/**/*.{js,jsx,ts,tsx}"],theme: { extend: {}},plugins: [],};

How To Use?(Example)

import Player from "next-js-player";export default function Home() {return (<main><Player source={"<source url/path>"} width={100} /></main>);}

Properties

Type

Attributes

Values

string

source

<url> or locale source of the video

number

width

<value in %> and by default value is 100%

boolean

loop

by default false

Repository

Github

Versions

v1.2.0: current stable version