A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo.
# NPM
npm install plyr-react
# Yarn
yarn add plyr-reactimport Plyr from 'plyr-react'
import 'plyr-react/dist/plyr.css'
export default function App() {
return (
<Plyr
source={
{
/* https://github.com/sampotts/plyr#the-source-setter */
}
}
options={
{
/* https://github.com/sampotts/plyr#options */
}
}
{
...{
/* Direct props for inner video tag (mdn.io/video) */
}
}
/>
)
}// Functional component
const MyComponent = () => {
const ref = useRef()
useEffect(() => {
// Access the internal plyr instance
console.log(ref.current.plyr)
})
return <Plyr ref={ref} />
}
// Component class
class MyComponent extends Component {
constructor(props) {
super(props)
this.player = createRef()
}
componentDidMount() {
// Access the internal plyr instance
console.log(this.player.current.plyr)
}
render() {
return (
<>
<Plyr ref={(player) => (this.player.current = player)} />
</>
)
}
}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.
return <Plyr ref={ref} />
// 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()You can fork these examples
Javascript example:
Typescript example:
Basic HLS integration Codesandbox
Demo: https://react-fpmwns.stackblitz.io
We are open to all new contribution, feel free to read CONTRIBUTING and CODE OF CONDUCT section, make new issue to discuss about the problem, and improve/fix/enhance the source code with your PRs.
There is a ready to code Gitpod, you can jump into it from
If you like the project and want to support my work, give star or fork it.
- @amirHossein-Ebrahimi For provide help for integrate to react-aptor.
- @iwatakeshi For provide help for convert to typescript.