Repository files navigation

A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo.

You can see a live demohere.

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

Plyr-React is a responsive, accessible, and highly customizable media player component for React. It wraps the popularPlyr media player, providing a simple and powerful way to integrate video, audio, YouTube, and Vimeo content into your React applications.

The library is designed for modern development, featuring a tree-shakeable and side-effect-free build, ensuring optimal performance. It offers both a simple component for quick setup and an advanced hook for complex, custom integrations.

• Broad Media Support: Natively supports HTML5<video> and<audio>, as well as embedded players from YouTube and Vimeo.
• Deep Customization: A rich set of options allows you to control every aspect of the player's UI and behavior, including controls, settings menus, and event listeners.
• Accessibility Focused: Built on the accessible foundation of the underlying Plyr player.
• Modern React API: Offers a simple<Plyr /> component for easy use and a powerfulusePlyr hook for full control and custom logic.
• Full Programmatic Access: Provides direct access to the Plyr instance via React refs, allowing you to control playback, volume, fullscreen, and more from your application code.
• TypeScript Support: Fully typed for a superior developer experience, with exported types for props, options, and the player instance.
• Streaming Support: Can be integrated with streaming libraries like HLS.js for adaptive bitrate streaming.

You can installplyr-react using NPM, Yarn, or PNPM.

# NPMnpm install plyr-react# Yarnyarn add plyr-react# PNPMpnpm add plyr-react

Forplyr-react to function correctly, it requires you to install some packages in your project yourself. These are known as peer dependencies. Thepackage.json file specifies the following:

• react: Version16.8 or newer.
• plyr: Version3.7.7 or a compatible version.

You must ensure these are listed in your project'spackage.json. Most package managers will warn you if these are missing.

To install peer dependencies:

# NPMnpm install react react-dom plyr# Yarnyarn add react react-dom plyr# PNPMpnpm add react react-dom plyr

• Node.js: Version16 or higher.
• React: Version16.8 or higher.

For most use cases, the<Plyr /> component is the simplest way to get started. Remember to import the stylesheet to apply the default player theme.

importPlyrfrom"plyr-react"import"plyr-react/plyr.css"// Player source configurationconstplyrProps={source:{type:"video",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4",type:"video/mp4",size:720,},],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",},options:{// Full list of options: https://github.com/sampotts/plyr#optionscontrols:["play-large","play","progress","current-time","mute","volume","captions","settings","pip","airplay","fullscreen",],},}functionMyPlayer(){return<Plyr{...plyrProps}/>}

Important CSS Path Change:As ofv5.0.0, the CSS import path isplyr-react/plyr.css. For older versions (v4), you must useplyr-react/dist/plyr.css.

For full control over the player's lifecycle and integration, theusePlyr hook is the recommended approach. It allows you to build a completely custom component wrapper.

importReactfrom"react"import{usePlyr}from"plyr-react"import"plyr-react/plyr.css"// This example re-creates the <Plyr /> component using the hookconstCustomPlyr=React.forwardRef((props,ref)=>{const{ source, options=null, ...rest}=props// usePlyr returns a ref that you can attach to a <video> or <div> element.constraptorRef=usePlyr(ref,{    source,    options,})return<videoref={raptorRef}className="plyr-react plyr"{...rest}/>})

You can control the player instance programmatically by using a ref. The ref gives you access to the full Plyr API. The ref'scurrent object will contain aplyr property, which is the player instance.

importReact,{useRef,useEffect}from"react"importPlyrfrom"plyr-react"import"plyr-react/plyr.css"constPlayerController=()=>{constref=useRef(null)constplayVideo=()=>{// ref.current.plyr is the Plyr instanceif(ref.current&&ref.current.plyr){ref.current.plyr.play()}}constenterFullscreen=()=>{if(ref.current&&ref.current.plyr){ref.current.plyr.fullscreen.enter()}}return(<div><Plyrref={ref}source={{type:"video",sources:[{src:"/path/to/video.mp4",type:"video/mp4"}],}}/><buttononClick={playVideo}>Play</button><buttononClick={enterFullscreen}>Go Fullscreen</button></div>)}

You can fork these examples

Javascriptexample:

Typescriptexample:

Basic HLSintegrationCodesandbox

Check out the examples directory for the useHls integration guide.

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

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

We are open to all new contribution, feel free toreadCONTRIBUTINGandCODE OF CONDUCT section, make new issue todiscuss about the problem, and improve/fix/enhance the source code with your PRs. There is a ready to code Gitpod, youcan jump into itfrom

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

Is your company using plyr-react in production? We'd love to feature you!Create PR and to submit your site or logo here.

The development and maintenance of this project have been supported by several key contributors:

• @realamirhe (Amir.H Ebrahimi): Assisted with infrastructure, documentation, tooling, maintenance, and testing, including the integration withreact-aptor.
• @iwatakeshi (Takeshi): Led the conversion of the project to TypeScript and contributed ideas, translations, user testing, and examples.
• @mnervik: Provided valuable support through testing and user feedback.