Next-React-VideoJS

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.

Features

• 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.

Installation

From npm (Public Registry)

Install the package via npm:

npm install next-react-videojs

Or using Yarn:

yarn add next-react-videojs

Usage

Here’s an example of how to use the next-react-videojs component:

In a React Project

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;

In a Next.js Project

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;

Props

options (required)

• Type: videojs.PlayerOptions
• Description: Options to configure the Video.js player, including video sources, playback settings, and plugins.

onReady (optional)

• Type: (player: videojs.Player) => void
• Description: Callback function that is called when the player is ready.

Example Configuration

{
    "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
    },
}

Development

Build

To build the project, run:

npm run build

Linting

To lint the project, run:

npm run lint

License

This project is licensed under the MIT License.

Repository

• GitHub: next-react-videojs
• NPM: next-react-videojs

Issues

If you encounter any issues or have suggestions, please create an issue in the GitHub repository.

Contributions

Contributions are welcome! Feel free to fork the repository, make changes, and submit a pull request.