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-videojsOr using Yarn:
yarn add next-react-videojsHere’s an example of how to use the next-react-videojs component:
import React from "react";
import VideoPlayer from "next-react-videojs";
const App = () => {
const videoJsOptions = {
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
},
};
const handlePlayerReady = (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 <VideoPlayer options={videoJsOptions} onReady={handlePlayerReady} />;
};
export default App;import dynamic from "next/dynamic";
const VideoPlayer = dynamic(() => import("next-react-videojs"), { ssr: false });
const Home = () => {
const videoJsOptions = {
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
},
};
const handlePlayerReady = (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 <VideoPlayer options={videoJsOptions} onReady={handlePlayerReady} />;
};
export default Home;- 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 buildTo lint the project, run:
npm run lintThis project is licensed under the MIT License.
- GitHub: next-react-videojs
- NPM: next-react-videojs
If you encounter any issues or have suggestions, please create an issue in the GitHub repository.
Contributions are welcome! Feel free to fork the repository, make changes, and submit a pull request.