{"library":"react-player","title":"ReactPlayer","description":"ReactPlayer is a highly versatile React component designed for embedding and controlling various media sources directly within a web application. It supports a wide array of popular platforms, including YouTube, Vimeo, Wistia, TikTok, Spotify, and Twitch, as well as generic file paths, HLS, and DASH streams. The current stable version is 3.4.0. The library underwent a significant architectural rewrite in v3, transitioning to TypeScript and enhancing its modularity. Maintenance has been officially taken over by Mux, indicating a commitment to more frequent updates and fixes, ensuring its adaptability to evolving media platforms and web standards. Its key differentiators include broad support for numerous media providers and the ability to dynamically load players, which helps reduce initial bundle size when code splitting is enabled.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-player"],"cli":null},"imports":["import ReactPlayer from 'react-player'","import ReactPlayer from 'react-player/lazy'","import { ReactPlayerProps } from 'react-player'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactPlayer from 'react-player';\n\nfunction MyVideoPlayer() {\n  const [playing, setPlaying] = useState(false);\n  const [volume, setVolume] = useState(0.8);\n  const [muted, setMuted] = useState(false);\n\n  return (\n    <div style={{ width: '640px', height: '360px' }}>\n      <h3>Now Playing: ReactPlayer Demo</h3>\n      <ReactPlayer\n        url='https://www.youtube.com/watch?v=LXb3EKWsInQ'\n        playing={playing}\n        controls={true}\n        volume={volume}\n        muted={muted}\n        width='100%'\n        height='100%'\n        onPlay={() => setPlaying(true)}\n        onPause={() => setPlaying(false)}\n        onVolumeChange={val => setVolume(val)}\n      />\n      <div style={{ marginTop: '10px' }}>\n        <button onClick={() => setPlaying(!playing)}>\n          {playing ? 'Pause' : 'Play'}\n        </button>\n        <button onClick={() => setMuted(!muted)} style={{ marginLeft: '10px' }}>\n          {muted ? 'Unmute' : 'Mute'}\n        </button>\n        <input\n          type='range'\n          min={0}\n          max={1}\n          step='any'\n          value={volume}\n          onChange={e => setVolume(parseFloat(e.target.value))}\n          style={{ marginLeft: '10px', width: '100px' }}\n        />\n        <span>{(volume * 100).toFixed(0)}%</span>\n      </div>\n    </div>\n  );\n}\n\nexport default MyVideoPlayer;\n","lang":"typescript","description":"Demonstrates a basic ReactPlayer setup with playback controls, volume adjustment, and mute functionality for a YouTube video.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}