Package Exports

next-react-videojs
next-react-videojs/dist/index.cjs.js
next-react-videojs/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (next-react-videojs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.