https://github.com/triyanox/react-video

A react video component for a unified and customizable playback experience across browsers [Inspired by appleTV video player]
https://github.com/triyanox/react-video

framer-motion ios-video-player react react-video react-video-player tailwindcss video video-player

Last synced: 29 days ago
JSON representation

A react video component for a unified and customizable playback experience across browsers [Inspired by appleTV video player]

• Host: GitHub
• URL: https://github.com/triyanox/react-video
• Owner: triyanox
• License: apache-2.0
• Created: 2023-12-17T19:19:14.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-02-11T14:20:41.000Z (9 months ago)
• Last Synced: 2024-10-01T15:26:07.388Z (about 1 month ago)
• Topics: framer-motion, ios-video-player, react, react-video, react-video-player, tailwindcss, video, video-player
• Language: TypeScript
• Homepage: https://react-video.achaq.dev
• Size: 2.01 MB
• Stars: 13
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# `@triyanox/react-video` a unified customizable video playback experience across all browsers for react



## Introduction

The `@triyanox/react-video` component is a highly customizable and easy-to-use React component for playing video content in your react applications inspired by apple tv video player. It offers extensive control over video playback and is fully compatible with TailwindCSS, allowing for seamless styling integration.

## Installation

To install the component, use the following command:

```bash

pnpm add @triyanox/react-video

```

## Usage

### Basic Usage

You can use the video component simply by importing `Video` from the package

 ```tsx

 import { Video } from "@triyanox/react-video";

 export default function Page() {

  return (

    

 )}

``````

### Options

- **`src: VideoSource`**: The source of the video. This can be either a string URL or an array of objects containing `src`, `type`, and `label` fields.

  - **Example**: 

    ```javascript

    [

      { src: 'https://example.com/video.mp4', type: 'video/mp4', label: 'SD' },

      { src: 'https://example.com/video.mp4', type: 'video/mp4', label: 'HD' }

    ]

    // or

    'https://example.com/video.mp4'

    ```

- **`poster?: string`**: URL of the video's poster image.

  - **Example**: `'https://example.com/poster.jpg'`

- **`title?: string`**: Title of the video.

  - **Example**: `'Video title'`

- **`subtitle?: string`**: Subtitle of the video.

  - **Example**: `'Video subtitle'`

- **Event Handlers**:

  - `onProgress?: (currentTime: number) => void`: Called when the video progress changes.

  - `onDuration?: (duration: number) => void`: Called when the video duration is available.

  - `onEnded?: () => void`: Called when the video ends.

  - `onPlay?: () => void`: Called when the video is played.

  - `onPause?: () => void`: Called when the video is paused.

  - `onLoad?: () => void`: Called when the video is loaded.

  - `onVolumeChange?: (volume: number) => void`: Called when the volume changes.

  - `onPlaybackRateChange?: (playbackRate: number) => void`: Called when the playback rate changes.

- **Styling and Layout**:

  - `className?: string`: Root CSS class for custom styling.

  - `classNames?: object`: Object containing CSS classes for various elements (title, subtitle, wrappers, video, backdrop, sliders).

- **Playback Control**:

  - `autoPlay?: boolean`: If `true`, the video will start playing as soon as it is ready.

  - `loop?: boolean`: If `true`, the video will loop continuously.

  - `showControls?: boolean`: If `true`, video controls will be displayed.

  - `icons?: object`: Custom icons for various video controls (play, pause, forward, etc.).

- **Additional Options**:

  - `hideSliderThumb?: boolean`: If `true`, hides the slider thumb.

### Example

```javascript

import React from 'react';

import { Video } from '@triyanox/react-video';

// Import custom icons (assuming these are available in your project)

import {

  CustomPlayIcon,

  CustomPauseIcon,

  CustomForwardIcon,

  CustomBackwardIcon,

  CustomEnterPipIcon,

  CustomExitPipIcon,

  CustomVolumeIcon,

  CustomFullScreenIcon,

  CustomExitFullScreenIcon,

  CustomLoadingIcon,

} from './YourIconPath';

const MyVideoComponent = () => {

  const videoProps = {

    src: [

      {

        src: 'https://example.com/video-sd.mp4',

        type: 'video/mp4',

        label: 'SD',

      },

      {

        src: 'https://example.com/video-hd.mp4',

        type: 'video/mp4',

        label: 'HD',

      },

    ],

    poster: 'https://example.com/poster.jpg',

    title: 'My Amazing Video',

    subtitle: 'An insightful subtitle',

    onProgress: currentTime => console.log(`Current Time: ${currentTime}`),

    onDuration: duration => console.log(`Duration: ${duration}`),

    onEnded: () => console.log('Video Ended'),

    onPlay: () => console.log('Video Played'),

    onPause: () => console.log('Video Paused'),

    onLoad: () => console.log('Video Loaded'),

    onVolumeChange: volume => console.log(`Volume: ${volume}`),

    onPlaybackRateChange: rate => console.log(`Playback Rate: ${rate}`),

    className: 'custom-video-class',

    autoPlay: true,

    loop: true,

    showControls: true,

    icons: {

      play: CustomPlayIcon,

      pause: CustomPauseIcon,

      forwardBy10: CustomForwardIcon,

      backBy10: CustomBackwardIcon,

      enterPip: CustomEnterPipIcon,

      exitPip: CustomExitPipIcon,

      volume: CustomVolumeIcon,

      fullScreen: CustomFullScreenIcon,

      exitFullScreen: CustomExitFullScreenIcon,

      loading: CustomLoadingIcon,

    },

    classNames: {

      base: 'video-base-class',

      title: 'video-title-class',

      subtitle: 'video-subtitle-class',

      topWrapper: 'top-wrapper-class',

      centerWrapper: 'center-wrapper-class',

      bottomWrapper: 'bottom-wrapper-class',

      video: 'video-element-class',

      backdrop: 'video-backdrop-class',

      volumeSlider: {

        root: 'volume-slider-root-class',

        track: 'volume-slider-track-class',

        thumb: 'volume-slider-thumb-class',

        range: 'volume-slider-range-class',

      },

      playbackRateSlider: {

        root: 'playback-rate-slider-root-class',

        track: 'playback-rate-slider-track-class',

        thumb: 'playback-rate-slider-thumb-class',

        range: 'playback-rate-slider-range-class',

      },

    },

    hideSliderThumb: false,

  };

  return ;

};

export default MyVideoComponent;

```

## Customization

The video component is fully customizable using TailwindCSS. You can use the `className` and `classNames` props to apply your TailwindCSS classes for styling the video player as per your design requirements.