Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chintan9/plyr-react
A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo
https://github.com/chintan9/plyr-react
accessibility hacktoberfest hacktoberfest2022 hook javascript media player plyr react react-hook react-hooks reactjs typescript video vimeo youtube
Last synced: 5 days ago
JSON representation
A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo
- Host: GitHub
- URL: https://github.com/chintan9/plyr-react
- Owner: chintan9
- License: mit
- Created: 2019-12-09T22:23:21.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T09:07:23.000Z (2 months ago)
- Last Synced: 2024-10-29T21:24:43.431Z (2 months ago)
- Topics: accessibility, hacktoberfest, hacktoberfest2022, hook, javascript, media, player, plyr, react, react-hook, react-hooks, reactjs, typescript, video, vimeo, youtube
- Language: TypeScript
- Homepage: https://github.com/chintan9/plyr-react
- Size: 15.4 MB
- Stars: 479
- Watchers: 3
- Forks: 53
- Open Issues: 52
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
Plyr React
A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo.
You can see a live demo [here](https://githubbox.com/chintan9/plyr-react/tree/master/example/react).
> Make sure to select the version for the plyr-react in the dependencies.
## Installation
```bash
# NPM
npm install plyr-react
# Yarn
yarn add plyr-react
```
## Usage
### Ready to use `` component
The simplest form of react integration with the plyr is to use the `` component, it is best for the static
videos.
```tsx
import Plyr from "plyr-react"
import "plyr-react/plyr.css"
const plyrProps = {
source: undefined, // https://github.com/sampotts/plyr#the-source-setter
options: undefined, // https://github.com/sampotts/plyr#options
// Direct props for inner video tag (mdn.io/video)
}
function MyPlyrVideo() {
return
}
```
Old version 4 plyr-react
- The path for an import of css styles has been changed in version 5, if you are using the version 4, apply following change in the above code
```diff
- import "plyr-react/plyr.css"
+ import "plyr-react/dist/plyr.css"
```
### Ready to use `usePlyr` hook
If you need the full control over all if possible integration one can imagine, usePlyr is your hook. Here is a simple
and exact Plyr component made with the `usePlyr` hook. Are curios about how it works follow
this [thread](https://github.com/chintan9/plyr-react/issues/732#issuecomment-1029714462) and
this [proposal](https://github.com/chintan9/plyr-react/issues/678#issue-1043113412).
```jsx
const Plyr = React.forwardRef((props, ref) => {
const { source, options = null, ...rest } = props
const raptorRef = usePlyr(ref, {
source,
options,
})
return
})
```
### Accessing the plyr instance using refs
```tsx
// Function base component
const MyComponent = () => {
const ref = useRef()
useEffect(() => {
console.log("internal plyr instance:", ref.current.plyr)
})
return
}
// Class base component
class MyComponent extends Component {
constructor(props) {
super(props)
this.player = createRef()
}
componentDidMount() {
console.log("internal plyr instance", this.player.current.plyr)
}
render() {
return (this.player.current = player)} />
}
}
```
## API:
Currently the exported APIs contains a latest instance of plyr.
In other words, the passing ref will have access to the player in the structure shown below.
```jsx
return
// ref can get access to latest plyr instance with `ref.current.plyr`
ref = { current: { plyr } }
// so you can make your player fullscreen 🎉
ref.current.plyr.fullscreen.enter()
```
## Example
> You can fork these examples
**Javascript
example:**
**Typescript
example:**
**Basic HLS
integration**
Codesandbox
> Check out the examples directory for the useHls integration guide.
```jsx
```
**Demo:** https://react-fpmwns.stackblitz.io
## Nightly version of plyr-react:
## Contribute
We are open to all new contribution, feel free to
read [CONTRIBUTING](https://github.com/chintan9/plyr-react/blob/master/CONTRIBUTING.md)
and [CODE OF CONDUCT](https://github.com/chintan9/plyr-react/blob/master/CODE_OF_CONDUCT.md) section, make new issue to
discuss about the problem
[](https://gitter.im/plyr-react/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge), and improve/fix/enhance the source code with your PRs. There is a ready to code Gitpod, you
can jump into it
from 
## Support
If you like the project and want to support my work, give star ⭐ or fork it.
[](https://openbase.com/js/plyr-react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
## Thanks
- [@realamirhe](https://github.com/realamirhe) For provide help for integrate to react-aptor.
- [@iwatakeshi](https://github.com/iwatakeshi) For provide help for convert to typescript.