Naughty Pinching Mannequins

    plyr-react
    TypeScript icon, indicating that this package has built-in type declarations

    5.1.0 • Public • Published

    Plyr React

    plyr-react logo

    A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo.
    tree-shakeable side-effect free

    License Code quality Build Size Version Downloads

    You can see a live demo here.

    Make sure to select the version for the plyr-react in the dependencies.

    Installation

    # NPM
    npm install plyr-react
    
    # Yarn
    yarn add plyr-react

    Usage

    Ready to use <Plyr /> component

    The simplest form of react integration with the plyr is to use the <Plyr /> component, it is best for the static videos.

    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 <Plyr {...plyrProps} />
    }
    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
    - 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 and this proposal.

    const Plyr = React.forwardRef((props, ref) => {
      const { source, options = null, ...rest } = props
      const raptorRef = usePlyr(ref, {
        source,
        options,
      })
      return <video ref={raptorRef} className="plyr-react plyr" {...rest} />
    })

    Accessing the plyr instance using refs

    // Function base component
    const MyComponent = () => {
      const ref = useRef()
    
      useEffect(() => {
        console.log("internal plyr instance:", ref.current.plyr)
      })
    
      return <Plyr ref={ref} />
    }
    
    // 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 <Plyr ref={(player) => (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.

    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()

    Example

    You can fork these examples

    Javascript example: stackblitz example (js)

    Typescript example: codesandbox example (ts)

    Basic HLS integration Codesandbox

    Check out the examples directory for the useHls integration guide.

    <video
      ref={usePlyr(ref, {
        ...useHls(hlsSource, options),
        source,
      })}
      className="plyr-react plyr"
    />

    Demo: https://react-fpmwns.stackblitz.io

    Nightly version of plyr-react:

    Contribute

    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 Gitpod Ready-to-Code

    Support

    If you like the project and want to support my work, give star or fork it. Featured on Openbase

    Thanks

    • @realamirhe For provide help for integrate to react-aptor.
    • @iwatakeshi For provide help for convert to typescript.

    Install

    npm i plyr-react

    DownloadsWeekly Downloads

    12,254

    Version

    5.1.0

    License

    MIT

    Unpacked Size

    71.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • chintan9