1.0.5 • Published 1 year ago
r-lite-player v1.0.5
ReactLitePlayer 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.
npm i react-lite-playerusage
import { Video } from "r-lite-player";
function App() {
return (
<>
<Video
width={1000}
url="your video url"
subtitleUrl="your subti url" //optionl
/>
</>
);
}Props
| prop | Description | Default |
|---|---|---|
| url | Your video URL | No default. |
| subtitleUrl | Your subtitle file's URL | No default. |
| subtitleLanguage | Subtitle language | English |
| subtitleColor | Subtitle text color | #ffff |
| poster | Poster image URL | No default. |
| enableNextButton | Show next and previous buttons | False |
| onPlay | Event triggered upon the commencement of playback | |
| onPause | Event triggered when the video pauses | No default. |
| next | Function called when pressing the next button | Undefined |
| previous | Function called when pressing the previous button | Undefined |
| width | Video width | 100% |
| height | Video height | Auto |
| wrapperBackground | Video container background | #333 |
| errorMessage | Error message displayed when an error occurs | Something went wrong. |
| customErrorMessageComponent | Custom error component; having one overrides the default | Null |
| loop | Allow video to play in a loop | False |
| hideVideoWhenError | Hide the video when an error occurs | True (recommended) |
| crossOrigin | Video cross-origin property | Anonymous |
| subtitleBackground | Subtitle background | #000000a3 |
| bufferedIndicatorBackground | Background of the loaded-buffer progress | Undefined |
| videoProgressBackground | Video progress background | #ffff |
| autoPlay | Play the video immediately after loading | False |
| playerProgressBarContainer | Progress bar container | #9d9d9d34 |
| 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 |
Video Ref
To 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
| Method | Use case |
|---|---|
| togglePlay | play and pause the video |
| toggleCaptions | show and hide the subtitle component |
| togglePictureMode | toggle picture mode |
| toggleMute | Mute or unmute the video |
| toggleFullscreen | enter and exit full screen |
The video can also but accessed from the ref but calling ref.current.video(the name ref depends on how you name your variable)
Example use case
import { Video, useVideoRef } from "react-lite-player";
function App() {
const video = useVideoRef();
function togglePlay() {
video.current?.togglePlay();
}
return (
<div>
<button onClick={togglePlay}>toggle play</button>{" "}
{/*//control the player from your component directly using the forwarded ref */}
<Video ref={video} url={"url"} />
</div>
);
}
export default App;If you find this library useful consider linking it on GitHub, or maybe why not contribute to it 😌😌