react-streamify-play is a simple yet customizable video player for reactjs.
npm install react-streamify-play
sh
yarn add react-streamify-play
`
###### using npm
`sh
npm i react-streamify-play
`
###### using npm
`sh
npm install react-streamify-play
`
Getting Started
---
##### Basic Implementation
`jsx
import {
controlOptionsEnum,
VPlayer }
from "react-streamify-play"
`
#### Supported Formats
| Format | Description | File Type |
|-------------|------------------------------------------------------|-------------------|
| MP4 | A widely supported video format, ideal for most use cases. | .mp4 |
| OGG | Open-source video format with broad browser support, often used for web streaming. | .ogv |
| WebM | Open and royalty-free video format, commonly used in modern browsers for HTML5 video. | .webm |
| HLS | HTTP Live Streaming, used for streaming video over the internet in real-time. | .m3u8 (playlist) |
| MPEG-DASH | Dynamic Adaptive Streaming over HTTP, a streaming protocol for high-quality video streaming. | .mpd (playlist) |
Documentation
#### Control options
- If you want only few video controls just remove them from .controlOptions.
`jsx
source={sources[3]}
// all control options available
controlOptions={[
controlOptionsEnum.PLAY,
controlOptionsEnum.MUTE,
controlOptionsEnum.SETTINGS,
controlOptionsEnum.PICTURE_IN_PICTURE,
controlOptionsEnum.THEATER_MODE,
controlOptionsEnum.PREVIOUS,
controlOptionsEnum.NEXT,
controlOptionsEnum.SETTINGS,
controlOptionsEnum.FULLSCREEN
]}
/>
`
#### Loading
- If you want custom loading HTML Element pass the .loadingAsset which is a .ReactNode type.
`jsx
source={sources[3]}
loadingAsset={Loading...}
/>
`
#### Custom Events
- If you want custom analytics feature you can add the .Javascript event listeners directly to the .events prop.
`jsx
source={sources[0]}
events={
{
onLoadedData: () => console.log("Loaded data"),
onError: () => console.log("Error")
}
}
/>
`
#### Video Header
- If you want to add custom header to the video to show video title or some other option you can pass .VideoHeader.
`jsx
source={sources[0]}
VideoHeader={Custom Video Header
}
/>
`
#### Previous and Next click
- Handle the previous video link and next video link.
`jsx
source={sources[0]}
handleNext={() => console.log("Next")}
handlePrev={() => console.log("Prev")}
/>
`
#### Custom video and videocontainer styles
- You can add custom styles to the .VideoContainer or .Video element.
`jsx
source={sources[0]}
videoContainerStyles={
{
width: "100%",
height: "100%"
// and soo on..
}
}
videoStyles={
{
width: "100%",
height: "100%"
// and soo on..
}
}
/>
`
#### Theater Mode
- You can adjust the .TheaterMode
`jsx
source={sources[0]}
handleTheaterMode={() => console.log("Theater Mode")}
/>
``