README.md

Video Player React Component

This React component provides a customizable video player for integration into your React applications. It comes with essential features like play/pause, volume control, video quality selection, and more.

Installation

To use this component in your project, follow the steps below:

1. Install the required dependencies:

   npm install @chakra-ui/react react-full-screen

2. Import the Player component into your React file:

   import { Player } from 'video-player-tp-gl';

3. Integrate the Player component into your application by passing the necessary properties:

   const Video = () => {
     return (
       <Player
         src="your-video-url"
         thumbnail="your-thumbnail-url"
         muted={false}
         autoPlay={false}
         qualities={{
           hd: "your-video-url-hd",
           sd: "your-video-url-sd",
         }}
       />
     );
   };
   
   export default Video;

   Be sure to replace the placeholder URLs with the actual links to your video, thumbnail, and HD/SD versions.

Properties

• src (string): URL of the video.
• thumbnail (string): URL of the video thumbnail.
• muted (bool, optional): Set to true to enable mute by default.
• autoPlay (bool, optional): Set to true to enable autoplay.
• qualities (object): Object containing links for different video qualities (hd and sd).

Features

• Play/Pause
• Volume adjustment
• Video quality change
• Fast forward and rewind
• Video download
• Full-screen mode

Notes

This component uses Reat js and Chakra UI for UI components.

Author

[El mrabate Mouad]