{"id":23764457,"url":"https://github.com/chaqchase/react-video","last_synced_at":"2025-09-05T08:33:33.049Z","repository":{"id":212990048,"uuid":"732771623","full_name":"chaqchase/react-video","owner":"chaqchase","description":"A react video component for a unified and customizable playback experience across browsers [Inspired by appleTV video player]","archived":false,"fork":false,"pushed_at":"2024-02-11T14:20:41.000Z","size":2104,"stargazers_count":14,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-29T00:24:37.981Z","etag":null,"topics":["framer-motion","ios-video-player","react","react-video","react-video-player","tailwindcss","video","video-player"],"latest_commit_sha":null,"homepage":"https://react-video.achaq.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chaqchase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-12-17T19:19:14.000Z","updated_at":"2024-11-21T04:37:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"67aaf40c-4110-4db1-a9d3-c6aec739bb60","html_url":"https://github.com/chaqchase/react-video","commit_stats":null,"previous_names":["triyanox/react-video","chaqchase/react-video"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaqchase%2Freact-video","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaqchase%2Freact-video/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaqchase%2Freact-video/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaqchase%2Freact-video/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chaqchase","download_url":"https://codeload.github.com/chaqchase/react-video/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232032228,"owners_count":18462986,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framer-motion","ios-video-player","react","react-video","react-video-player","tailwindcss","video","video-player"],"created_at":"2024-12-31T22:18:14.190Z","updated_at":"2024-12-31T22:18:14.981Z","avatar_url":"https://github.com/chaqchase.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `@triyanox/react-video` a unified customizable video playback experience across all browsers for react\n\n\u003cimg src=\"https://raw.githubusercontent.com/triyanox/react-video/main/assets/cover.png\" alt=\"react-video banner\"\ntitle=\"react-video\" align=\"center\" height=\"auto\" width=\"100%\"/\u003e\n\n## Introduction\n\nThe `@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.\n\n## Installation\n\nTo install the component, use the following command:\n\n```bash\npnpm add @triyanox/react-video\n```\n\n## Usage\n\n### Basic Usage\n\nYou can use the video component simply by importing `Video` from the package\n\n ```tsx\n import { Video } from \"@triyanox/react-video\";\n\n export default function Page() {\n  return (\n    \u003cVideo\n    src=\"https://vjs.zencdn.net/v/oceans.mp4\"\n    /\u003e\n )}\n``````\n\n### Options\n\n- **`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.\n  - **Example**: \n    ```javascript\n    [\n      { src: 'https://example.com/video.mp4', type: 'video/mp4', label: 'SD' },\n      { src: 'https://example.com/video.mp4', type: 'video/mp4', label: 'HD' }\n    ]\n    // or\n    'https://example.com/video.mp4'\n    ```\n\n- **`poster?: string`**: URL of the video's poster image.\n  - **Example**: `'https://example.com/poster.jpg'`\n\n- **`title?: string`**: Title of the video.\n  - **Example**: `'Video title'`\n\n- **`subtitle?: string`**: Subtitle of the video.\n  - **Example**: `'Video subtitle'`\n\n- **Event Handlers**:\n  - `onProgress?: (currentTime: number) =\u003e void`: Called when the video progress changes.\n  - `onDuration?: (duration: number) =\u003e void`: Called when the video duration is available.\n  - `onEnded?: () =\u003e void`: Called when the video ends.\n  - `onPlay?: () =\u003e void`: Called when the video is played.\n  - `onPause?: () =\u003e void`: Called when the video is paused.\n  - `onLoad?: () =\u003e void`: Called when the video is loaded.\n  - `onVolumeChange?: (volume: number) =\u003e void`: Called when the volume changes.\n  - `onPlaybackRateChange?: (playbackRate: number) =\u003e void`: Called when the playback rate changes.\n\n- **Styling and Layout**:\n  - `className?: string`: Root CSS class for custom styling.\n  - `classNames?: object`: Object containing CSS classes for various elements (title, subtitle, wrappers, video, backdrop, sliders).\n\n- **Playback Control**:\n  - `autoPlay?: boolean`: If `true`, the video will start playing as soon as it is ready.\n  - `loop?: boolean`: If `true`, the video will loop continuously.\n  - `showControls?: boolean`: If `true`, video controls will be displayed.\n  - `icons?: object`: Custom icons for various video controls (play, pause, forward, etc.).\n\n- **Additional Options**:\n  - `hideSliderThumb?: boolean`: If `true`, hides the slider thumb.\n\n### Example\n\n```javascript\nimport React from 'react';\nimport { Video } from '@triyanox/react-video';\n\n// Import custom icons (assuming these are available in your project)\nimport {\n  CustomPlayIcon,\n  CustomPauseIcon,\n  CustomForwardIcon,\n  CustomBackwardIcon,\n  CustomEnterPipIcon,\n  CustomExitPipIcon,\n  CustomVolumeIcon,\n  CustomFullScreenIcon,\n  CustomExitFullScreenIcon,\n  CustomLoadingIcon,\n} from './YourIconPath';\n\nconst MyVideoComponent = () =\u003e {\n  const videoProps = {\n    src: [\n      {\n        src: 'https://example.com/video-sd.mp4',\n        type: 'video/mp4',\n        label: 'SD',\n      },\n      {\n        src: 'https://example.com/video-hd.mp4',\n        type: 'video/mp4',\n        label: 'HD',\n      },\n    ],\n    poster: 'https://example.com/poster.jpg',\n    title: 'My Amazing Video',\n    subtitle: 'An insightful subtitle',\n    onProgress: currentTime =\u003e console.log(`Current Time: ${currentTime}`),\n    onDuration: duration =\u003e console.log(`Duration: ${duration}`),\n    onEnded: () =\u003e console.log('Video Ended'),\n    onPlay: () =\u003e console.log('Video Played'),\n    onPause: () =\u003e console.log('Video Paused'),\n    onLoad: () =\u003e console.log('Video Loaded'),\n    onVolumeChange: volume =\u003e console.log(`Volume: ${volume}`),\n    onPlaybackRateChange: rate =\u003e console.log(`Playback Rate: ${rate}`),\n    className: 'custom-video-class',\n    autoPlay: true,\n    loop: true,\n    showControls: true,\n    icons: {\n      play: CustomPlayIcon,\n      pause: CustomPauseIcon,\n      forwardBy10: CustomForwardIcon,\n      backBy10: CustomBackwardIcon,\n      enterPip: CustomEnterPipIcon,\n      exitPip: CustomExitPipIcon,\n      volume: CustomVolumeIcon,\n      fullScreen: CustomFullScreenIcon,\n      exitFullScreen: CustomExitFullScreenIcon,\n      loading: CustomLoadingIcon,\n    },\n    classNames: {\n      base: 'video-base-class',\n      title: 'video-title-class',\n      subtitle: 'video-subtitle-class',\n      topWrapper: 'top-wrapper-class',\n      centerWrapper: 'center-wrapper-class',\n      bottomWrapper: 'bottom-wrapper-class',\n      video: 'video-element-class',\n      backdrop: 'video-backdrop-class',\n      volumeSlider: {\n        root: 'volume-slider-root-class',\n        track: 'volume-slider-track-class',\n        thumb: 'volume-slider-thumb-class',\n        range: 'volume-slider-range-class',\n      },\n      playbackRateSlider: {\n        root: 'playback-rate-slider-root-class',\n        track: 'playback-rate-slider-track-class',\n        thumb: 'playback-rate-slider-thumb-class',\n        range: 'playback-rate-slider-range-class',\n      },\n    },\n    hideSliderThumb: false,\n  };\n\n  return \u003cVideo {...videoProps} /\u003e;\n};\n\n\nexport default MyVideoComponent;\n```\n\n## Customization\n\nThe 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchaqchase%2Freact-video","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchaqchase%2Freact-video","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchaqchase%2Freact-video/lists"}