- Notifications
You must be signed in to change notification settings - Fork0
a reusable React and Next.js library for Video.js with full feature support.
License
NotificationsYou must be signed in to change notification settings
Masniper/next-react-videojs
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A reusable React library for integrating Video.js with full feature support. This library simplifies the integration of Video.js in React and Next.js projects, providing a modular and user-friendly interface for embedding video players.
- Full support for Video.js features, including playback controls, custom skins, and plugins.
- React and Next.js compatibility.
- Support for multiple video formats (e.g., MP4, OGG, HLS, DASH).
- Customizable options for autoplay, controls, playback rates, and more.
- Lightweight and easy to integrate
Install the package via npm:
npm install next-react-videojs
Or using Yarn:
yarn add next-react-videojs
Here’s an example of how to use thenext-react-videojs component:
importReactfrom"react";importVideoPlayerfrom"next-react-videojs";constApp=()=>{constvideoJsOptions={autoplay:false,controls:true,preload:'auto',responsive:true,fluid:true,playbackRates:[0.5,1,1.5,2],loop:true,muted:false,poster:'https://hoststreamsell-pics.s3.amazonaws.com/600c26a209974338f4a579055e7ef61f_big.jpg',language:'en',aspectRatio:'16:9',sources:[{src:'https://www.w3schools.com/html/mov_bbb.mp4',type:'video/mp4',},{src:'https://www.w3schools.com/html/movie.ogg',type:'video/ogg',},],tracks:[{kind:'captions',src:'https://example.com/captions.vtt',srclang:'en',label:'English',default:true,},],plugins:{examplePlugin:{},//optional plugin},};consthandlePlayerReady=(player)=>{console.log("Player is ready:",player);player.on("play",()=>{console.log("Video is playing");});player.on("pause",()=>{console.log("Video is paused");});player.on("ended",()=>{console.log("Video ended");});};return<VideoPlayeroptions={videoJsOptions}onReady={handlePlayerReady}/>;};exportdefaultApp;
importdynamicfrom"next/dynamic";constVideoPlayer=dynamic(()=>import("next-react-videojs"),{ssr:false});constHome=()=>{constvideoJsOptions={autoplay:false,controls:true,preload:'auto',responsive:true,fluid:true,playbackRates:[0.5,1,1.5,2],loop:true,muted:false,poster:'https://hoststreamsell-pics.s3.amazonaws.com/600c26a209974338f4a579055e7ef61f_big.jpg',language:'en',aspectRatio:'16:9',sources:[{src:'https://www.w3schools.com/html/mov_bbb.mp4',type:'video/mp4',},{src:'https://www.w3schools.com/html/movie.ogg',type:'video/ogg',},],tracks:[{kind:'captions',src:'https://example.com/captions.vtt',srclang:'en',label:'English',default:true,},],plugins:{examplePlugin:{},//optional plugin},};consthandlePlayerReady=(player)=>{console.log("Player is ready:",player);player.on("play",()=>{console.log("Video is playing");});player.on("pause",()=>{console.log("Video is paused");});player.on("ended",()=>{console.log("Video ended");});};return<VideoPlayeroptions={videoJsOptions}onReady={handlePlayerReady}/>;};exportdefaultHome;
- Type:
videojs.PlayerOptions - Description: Options to configure the Video.js player, including video sources, playback settings, and plugins.
- Type:
(player: videojs.Player) => void - Description: Callback function that is called when the player is ready.
{"autoplay":false,"controls":true,"preload":"auto","responsive":true,"fluid":true,"playbackRates": [0.5,1,1.5,2],"loop":true,"muted":false,"poster":"https://hoststreamsell-pics.s3.amazonaws.com/600c26a209974338f4a579055e7ef61f_big.jpg","language":"en","aspectRatio":"16:9","sources": [ {"src":"https://www.w3schools.com/html/mov_bbb.mp4","type":"video/mp4", }, {"src":"https://www.w3schools.com/html/movie.ogg","type":"video/ogg", }, ],"tracks": [ {"kind":"captions","src":"https://example.com/captions.vtt","srclang":"en","label":"English","default":true, }, ],"plugins": {"examplePlugin": {},//optional plugin },}To build the project, run:
npm run build
To lint the project, run:
npm run lint
This project is licensed under theMIT License.
- GitHub:next-react-videojs
- NPM:next-react-videojs
If you encounter any issues or have suggestions, please create an issue in theGitHub repository.
Contributions are welcome! Feel free to fork the repository, make changes, and submit a pull request.
About
a reusable React and Next.js library for Video.js with full feature support.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published