Video Player

The Reactjs Media library provides a customizable, ready-to-use Video Player component, making it easy to integrate video playback into your React application.

Key Features

• Fully customizable controls and UI
• Built as a lightweight wrapper around the HTML5 video element
• Easy to integrate and configure

Installation & Setup

The Video Player is designed following React principles to ensure modularity and flexibility. You can quickly add it to your project by importing it from the reactjs-media package and passing the necessary properties.

Quick Start Example

import { Video } from "reactjs-media";

const App = () => {
  return (
    <div>
      <Video
        src="/video.mkv"         // Your video source
        controls={true}           // Show video controls
        height={500}              // Video player height
        width={800}               // Video player width
        poster="https://example.com/poster-image.jpg"  // Image displayed before video plays
      />
    </div>
  );
};

Props Overview

The Video Player accepts a wide range of properties (props) to give you full control over video playback and interaction. These can be divided into two categories: Attributes and Event Handlers.

---

Attributes

These props define the behavior and appearance of the video player.

Prop	Type	Description
src	string	The source URL of the video file (required).
controls	boolean	Displays video controls (e.g., play, pause, volume) if true.
height	number	Sets the height of the video player.
width	number	Sets the width of the video player.
poster	string	A poster image to show before the video starts.
autoPlay	boolean	If true, the video will play automatically once loaded.
loop	boolean	If true, the video will loop continuously once it finishes.

---

Event Handlers

These functions let you handle key events that occur during video playback.

Event	Description
onPlay	Called when the video starts playing.
onPause	Called when the video is paused.
onEnded	Triggered when the video finishes playing.
onTimeUpdate	Receives the current playback time as the video progresses.
onVolumeChange	Receives the current volume level whenever it's adjusted.
onSeeking	Triggered when the user seeks to a new time in the video.
onSeeked	Called once the seeking operation is complete.
onError	Triggered when there is an error loading the video.

---

Conclusion

With the Reactjs Media Video Player, you can quickly add rich video functionality to your application while maintaining full control over both the UI and the playback experience. Customize the player as needed, and take advantage of the built-in event handlers to create seamless user experiences.