Installation

Learn how to install and set up @ntxmjs/react-custom-video-player in your React application with step-by-step instructions.

Getting started with @ntxmjs/react-custom-video-player is straightforward. This guide walks you through the installation process and helps you verify that everything is set up correctly for your React application.

Prerequisites

Before installing the video player, ensure your development environment meets these requirements:

Node.js Version: The package requires Node.js version 18 or higher. This ensures compatibility with modern JavaScript features and optimal performance. You can check your current Node.js version by running:

node --version

If you need to upgrade Node.js, visit the official Node.js website to download the latest LTS (Long Term Support) version.

React Version: The video player is built for React 18 and above. If you're starting a new project, you'll automatically get a compatible version. For existing projects, verify your React version in your package.json file.

Installing the Package

1

Step 1: Install the Core Package

Open your terminal in your project directory and run the following command to install the video player package:

npm install @ntxmjs/react-custom-video-player

This command downloads and installs the latest stable version of the video player into your project's node_modules directory and adds it to your package.json dependencies.

Package Manager Alternatives:

If you're using Yarn or pnpm instead of npm, you can use these equivalent commands:

Yarn: yarn add @ntxmjs/react-custom-video-player

pnpm: pnpm add @ntxmjs/react-custom-video-player

2

Step 2: Install Peer Dependencies

The video player relies on several peer dependencies that must be installed separately. Install them with this command:

npm install react react-dom hls.js

These dependencies serve specific purposes:

  • react and react-dom: The core React libraries that power the component framework
  • hls.js: A JavaScript library that enables HTTP Live Streaming (HLS) support, allowing the player to handle .m3u8 video streams with adaptive bitrate streaming

Peer Dependency Importance:

Peer dependencies are not automatically installed with the main package. You must install them manually to avoid runtime errors. If these dependencies are missing, the video player will not function correctly.

3

Step 3: Verify Installation

After installation, verify that all packages were installed successfully by checking your package.json file. You should see entries similar to these:

{
  "dependencies": {
    "@ntxmjs/react-custom-video-player": "^0.1.6",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "hls.js": "^1.4.0"
  }
}

The exact version numbers may vary depending on when you install the packages, but this confirms that all required dependencies are present in your project.

4

Step 4: Test the Installation

To confirm everything is working, create a simple test component. Create a new file called TestPlayer.jsx in your project:

import { CustomVideoPlayer } from "@ntxmjs/react-custom-video-player";

function TestPlayer() {
  return (
    <div style={{ width: "800px", height: "450px", margin: "0 auto" }}>
      <p>If you can see this, the package imported successfully!</p>
    </div>
  );
}

export default TestPlayer;

If this component renders without errors, your installation is complete. The component itself won't display a video yet since we haven't configured it, but the successful import confirms that the package is installed correctly.

Troubleshooting Common Installation Issues

If you encounter problems during installation, here are solutions to common issues:

Module Not Found Error: If you see an error like "Cannot find module '@ntxmjs/react-custom-video-player'", try these steps:

  1. Delete your node_modules folder and package-lock.json file
  2. Run npm install again to reinstall all dependencies
  3. Restart your development server

Peer Dependency Warnings: If npm displays warnings about peer dependencies, ensure you've installed all required packages listed in Step 2. These warnings indicate missing dependencies that the video player needs to function.

Version Conflicts: If you encounter version conflicts with React or other dependencies, check your package.json to ensure all packages are using compatible versions. The video player requires React 18 or higher.

Build Errors: If your build process fails after installation, clear your build cache:

npm run clean
npm run build

The exact command may vary depending on your build setup.

What's Next?

Now that you've successfully installed the video player, you're ready to move forward:

  • Learn about Peer Dependencies to understand what each dependency does and why it's required
  • Explore the Quick Start guide to create your first working video player
  • Review the Props documentation to understand all available configuration options

The installation process sets the foundation for using the video player in your application. The next steps will guide you through configuring and customizing the player to match your specific needs.