Modern Accessible Video Player Component - React Video Player

Description:

React Video Player is a React component for embedding video content with a full set of player controls.

The library manages core video operations like play, pause, and seeking. It also supports advanced browser capabilities such as picture-in-picture mode and fullscreen playback.

Features

🎛️ Customize the player’s user interface with unique color themes.
⏯️ Control playback with dedicated play and pause buttons in the control bar and as a screen overlay.
⏪⏩ Skip backward or forward in 10-second intervals.
🔊 Adjust the volume or mute the audio.
⌨️ Use keyboard shortcuts for common actions like play, pause, skipping, and volume control.
🖼️ Watch videos in a floating window with picture-in-picture support.
🖥️ Toggle a fullscreen mode for an immersive viewing experience.
🕒 Seek to any point in the video using the interactive progress bar.
📱 Get a responsive layout that adapts to mobile, tablet, and desktop screens.
♿ Navigate the player using a keyboard and benefit from included ARIA labels for accessibility.

Preview

Use Cases

E-learning Platforms Integrate a reliable video player for course content with controls for easy navigation through lessons.
Marketing Websites Showcase product demos or promotional videos with a customizable player that matches your brand’s design.
Portfolio Sites Embed a sleek and modern video player to display creative work or project reels.
Internal Training portals Use the player for internal training videos, where keyboard shortcuts and clear controls improve the user experience.

How to Use It

1. Install the reactnextplayer package from the npm registry.

npm install reactnextplayer

yarn add reactnextplayer

2. Iimport the ReactNextPlayer component into your React application. The component requires a src prop to specify the video URL.

"use client";
import React from "react";
import ReactNextPlayer from "reactnextplayer";
export default function MyVideoComponent() {
  const handlePlay = () => {
    console.log("The video has started playing.");
  };
  const handlePause = () => {
    console.log("The video has been paused.");
  };
  return (
    <div style={{ width: "750px", margin: "auto" }}>
      <ReactNextPlayer
        src="/path/to/your-video.mp4"
        poster="/path/to/your-poster.jpg"
        color="#3498db"
        onPlay={handlePlay}
        onPause={handlePause}
      />
    </div>
  );
}

3. Customize the player’s behavior and appearance through various props.

src: string (required) – Specifies the URL for the video source file.
controls: boolean – Toggles the visibility of the player controls. Defaults to true.
autoplay: boolean – Starts video playback automatically when the component loads. Defaults to false.
muted: boolean – Mutes the video audio by default. Defaults to false.
loop: boolean – Restarts the video automatically after it ends. Defaults to false.
contextMenu: boolean – Disables the default right-click context menu on the player. Defaults to false.
poster: string – Provides a URL for an image to display before the video plays.
width: string | number – Sets the width of the player. Defaults to "100%".
height: string | number – Sets the height of the player. Defaults to "auto".
className: string – Applies a custom CSS class to the player container.
color: string – Defines a primary color for the player’s UI elements, such as the progress bar. Defaults to "#ff0000".

4. The component also provides event callbacks to track the player’s state.

onPlay: A function that executes when the video starts playing.
onPause: A function that executes when the video is paused.
onEnded: A function that executes when the video finishes.
onTimeUpdate: A function that receives the current playback time as an argument and executes as the video plays.

Related Resources

ReactPlayer: A popular React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, and more.
Video.js: A popular web video player that can be integrated into React applications. It supports HTML5 video, modern streaming formats, and has a large ecosystem of plugins.
Plyr for React: A simple, accessible, and customizable HTML5, YouTube, and Vimeo media player that has a dedicated React component for easy integration.

FAQs

Q: Is ReactNextPlayer responsive?
A: Yes, the player is designed to be fully responsive and will adapt its layout and controls for desktop, tablet, and mobile devices.

Q: Can I change the color of the player controls?
A: You can customize the primary color of the player’s UI elements, such as the progress bar and volume slider, by passing a hex color value to the color prop.

Q: What video formats are supported?
A: The player supports standard HTML5 video formats, including MP4 and WebM.

Q: Does the player support keyboard navigation?
A: Yes, it includes keyboard shortcuts for common actions. You can play or pause with the spacebar, skip forward and backward with the arrow keys, and adjust the volume with the up and down arrow keys.