A customizable React component serving as a wrapper for the popular Video.js library. This component provides a sleek and responsive video player with theme options.

Storybook Demo

Api Doc (tsdocs)

npm install @graphland/react-video-player

import React from "react";
import { VideoPlayer, VideoPlayerProps } from "@graphland/react-video-player";
const App: React.FC = () => {
 const videoSources = [
 {
 src: "https://media.w3.org/2010/05/sintel/trailer_hd.mp4",
 type: "video/mp4",
 },
 // Add more video sources as needed
 ];
 const videoProps: VideoPlayerProps = {
 theme: "city", // 'city', 'fantasy', 'forest', 'sea'
 height: 720,
 width: 1280,
 autoPlay: false,
 loop: false,
 sources: videoSources,
 controlBar: {
 skipButtons: {
 forward: 5,
 backward: 5,
 },
 },
 playbackRates: [0.5, 1, 1.5, 2],
 disablePictureInPicture: false,
 onReady: () => {
 console.log("Video player is ready!");
 },
 };
 return <VideoPlayer {...videoProps} />;
};
export default App;

• theme (optional): Choose from 'city', 'fantasy', 'forest', 'sea' for different player themes.
• height (optional): Height of the video player in pixels.
• width (optional): Width of the video player in pixels.
• autoPlay (optional): Automatically start playing the video when the component mounts.
• loop (optional): Enable looping of the video.
• sources (required): An array of video sources with { src: string, type: string } format.
• poster (optional): URL for the video poster image.
• controlBar (optional): Additional configuration for the video control bar, including skip buttons.
• playbackRates (optional): Array of playback rates available to the user.
• disablePictureInPicture (optional): Disable the Picture-in-Picture mode.
• onReady (optional): Callback function called when the video player is ready.