@graphland/react-video-player/dist/index.d.ts

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.

import React from 'react';
import { ReadyCallback } from 'video.js';

interface VideoPlayerProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The theme of the video player
     * @default "city"
     */
    theme?: "city" | "fantasy" | "forest" | "sea";
    /**
     * The height and width of the video player
     * @default 1080
     */
    height?: number;
    /**
     * The height and width of the video player
     * @default 1920
     */
    width?: number;
    /**
     * Whether the video should autoplay or not
     * @default false
     */
    autoPlay?: boolean;
    /**
     * Whether the video should loop or not
     * @default false
     */
    loop?: boolean;
    /**
     * The sources of the video
     * @default []
     * @example
  ```ts
     <VideoPlayer
      sources={[
          {
              src: "https://vjs.zencdn.net/v/oceans.mp4",
              type: "video/mp4",
          },
          {
              src: "https://vjs.zencdn.net/v/oceans.webm",
              type: "video/webm",
          },
          {
              src: "https://vjs.zencdn.net/v/oceans.ogv",
              type: "video/ogg",
          },
      ]}
  />
  ```
     */
    sources?: {
        src: string;
        type: string;
    }[];
    /**
     * The poster of the video
     * @default ""
     */
    poster?: string;
    /**
     * Whether the video should be fluid or not
     */
    controlBar?: {
        skipButtons?: {
            forward?: number;
            backward?: number;
        };
    };
    /**
     * The playback rates of the video
     * @default [0.5, 1, 1.5, 2]
     */
    playbackRates?: number[];
    /**
     * Whether the video should be fluid or not
     * @default false
     */
    disablePictureInPicture?: boolean;
    /**
     * Whether the video should be fluid or not
     * @default false
     */
    isFluid?: boolean;
    /**
     * Callback when the video is ready
     * @default undefined
     */
    onReady?: (ready: ReadyCallback | undefined) => void;
}
declare const VideoPlayer: React.FC<VideoPlayerProps>;

export { VideoPlayer, type VideoPlayerProps };