{"id":19813999,"url":"https://github.com/djibrilm/react-lite-player","last_synced_at":"2026-01-19T11:11:43.365Z","repository":{"id":228407277,"uuid":"773156931","full_name":"DjibrilM/React-Lite-Player","owner":"DjibrilM","description":"react video player library ","archived":false,"fork":false,"pushed_at":"2024-06-15T18:55:51.000Z","size":57749,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T01:26:47.659Z","etag":null,"topics":["library","player","react","subtitles","track","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/r-lite-player","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DjibrilM.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null}},"created_at":"2024-03-16T22:40:44.000Z","updated_at":"2024-06-15T18:55:56.000Z","dependencies_parsed_at":"2024-11-12T09:52:44.205Z","dependency_job_id":null,"html_url":"https://github.com/DjibrilM/React-Lite-Player","commit_stats":null,"previous_names":["djibrilm/react-lite-player"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DjibrilM%2FReact-Lite-Player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DjibrilM%2FReact-Lite-Player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DjibrilM%2FReact-Lite-Player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DjibrilM%2FReact-Lite-Player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DjibrilM","download_url":"https://codeload.github.com/DjibrilM/React-Lite-Player/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305945,"owners_count":20917208,"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":["library","player","react","subtitles","track","typescript"],"created_at":"2024-11-12T09:37:50.799Z","updated_at":"2026-01-19T11:11:38.332Z","avatar_url":"https://github.com/DjibrilM.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eReact Lite Player\u003c/h1\u003e\n\nReactLitePlayer player is a minimalistic video player aimed to offer simple usage with the least of features you need for your project, while making everything simple the library offers customization and call-back functions that you may want.\n\n\n![Frame 2 (2)](https://github.com/DjibrilM/React-Lite-Player/assets/82331014/53b8c35f-b3d1-4df7-b5fa-82a25e3b08bb)\n\n\n\u003ch4\u003einstallation\u003c/h4\u003e\n\n```ts\nnpm i react-lite-player\n```\n\n#### usage\n\n```tsx\nimport { Video } from \"r-lite-player\";\n\nfunction App() {\n return (\n \u003c\u003e\n \u003cVideo\n width={1000}\n url=\"your video url\"\n subtitleUrl=\"your subti url\" //optionl\n /\u003e\n \u003c/\u003e\n );\n}\n```\n\n##### Props\n\n| prop | Description | Default |\n| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |\n| url | Your video URL | No default. |\n| subtitleUrl | Your subtitle file's URL | No default. |\n| subtitleLanguage | Subtitle language | English |\n| subtitleColor | Subtitle text color | #ffff |\n| poster | Poster image URL | No default. |\n| enableNextButton | Show next and previous buttons | False |\n| onPlay | Event triggered upon the commencement of playback | |\n| onPause | Event triggered when the video pauses | No default. |\n| next | Function called when pressing the next button | Undefined |\n| previous | Function called when pressing the previous button | Undefined |\n| width | Video width | 100% |\n| height | Video height | Auto |\n| wrapperBackground | Video container background | #333 |\n| errorMessage | Error message displayed when an error occurs | Something went wrong. |\n| customErrorMessageComponent | Custom error component; having one overrides the default | Null |\n| loop | Allow video to play in a loop | False |\n| hideVideoWhenError | Hide the video when an error occurs | True (recommended) |\n| crossOrigin | Video cross-origin property | Anonymous |\n| subtitleBackground | Subtitle background | #000000a3 |\n| bufferedIndicatorBackground | Background of the loaded-buffer progress | Undefined |\n| videoProgressBackground | Video progress background | #ffff |\n| autoPlay | Play the video immediately after loading | False |\n| playerProgressBarContainer | Progress bar container | #9d9d9d34 |\n| customControlsArea | his area is reserved for any elements you may want to add to the bottom-left side of the controllers, such as a subtitles drop-down or settings drop-down for the player. Just anything you may want to add to the player | null |\n\n**Video Ref**\n\nTo allow full customization and control over the video, the video forwards its ref and some methods that you can access using the `useVideoRef` hook those methods are\n\n| Method | Use case |\n| ----------------- | ------------------------------------ |\n| togglePlay | play and pause the video |\n| toggleCaptions | show and hide the subtitle component |\n| togglePictureMode | toggle picture mode |\n| toggleMute | Mute or unmute the video |\n| toggleFullscreen | enter and exit full screen |\n\nThe video can also but accessed from the ref but calling `ref.current.video`(the name ref depends on how you name your variable)\n\n**Example use case**\n\n```ts\nimport { Video, useVideoRef } from \"react-lite-player\";\n\nfunction App() {\n const video = useVideoRef();\n\n function togglePlay() {\n video.current?.togglePlay();\n }\n\n return (\n \u003cdiv\u003e\n \u003cbutton onClick={togglePlay}\u003etoggle play\u003c/button\u003e{\" \"}\n {/*//control the player from your component directly using the forwarded ref */}\n \u003cVideo ref={video} url={\"url\"} /\u003e\n \u003c/div\u003e\n );\n}\n\nexport default App;\n```\n\nIf you find this library useful consider linking it on GitHub, or maybe why not contribute to it 😌😌\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjibrilm%2Freact-lite-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdjibrilm%2Freact-lite-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjibrilm%2Freact-lite-player/lists"}