npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

react-player

v1.12.0

Published

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

Downloads

413,102

Readme

ReactPlayer

Latest npm version Build Status Dependency Status Test Coverage Donate

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion. Not using React? No problem.

Usage

npm install react-player --save
# or
yarn add react-player
import React, { Component } from 'react'
import ReactPlayer from 'react-player'

class App extends Component {
  render () {
    return <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing />
  }
}

Demo page: https://cookpete.com/react-player

The component parses a URL and loads in the appropriate markup and external SDKs to play media from various sources. Props can be passed in to control playback and react to events such as buffering or media ending. See the demo source for a full example.

For platforms without direct use of npm modules, a minified version of ReactPlayer is located in dist after installing. To generate this file yourself, checkout the repo and run npm run build:dist.

Polyfills

Autoplay

As of Chrome 66, videos must be muted in order to play automatically. Some players, like Facebook, cannot be unmuted until the user interacts with the video, so you may want to enable controls to allow users to unmute videos themselves.

Props

PropDescriptionDefault
urlThe url of a video or song to play
  Can be an array or MediaStream object
playingSet to true or false to pause or play the mediafalse
loopSet to true or false to loop the mediafalse
controlsSet to true or false to display native player controls
  Vimeo, Twitch and Wistia player will always display controls
false
lightSet to true to show just the video thumbnail, which loads the full player on click
  Pass in an image URL to override the preview image
false
volumeSet the volume of the player, between 0 and 1
  null uses default volume on all players #357
null
mutedMutes the player
  Only works if volume is set
false
playbackRateSet the playback rate of the player
  Only supported by YouTube, Wistia, and file paths
1
widthSet the width of the player640px
heightSet the height of the player360px
styleAdd inline styles to the root element{}
progressIntervalThe time between onProgress callbacks, in milliseconds1000
playsinlineApplies the playsinline attribute where supportedfalse
pipSet to true or false to enable or disable picture-in-picture modefalse
wrapperElement or component to use as the container elementdiv
configOverride options for the various players, see config prop

Callback props

Callback props take a function that gets fired on various player events:

PropDescription
onReadyCalled when media is loaded and ready to play. If playing is set to true, media will play immediately
onStartCalled when media starts playing
onPlayCalled when media starts or resumes playing after pausing or buffering
onProgressCallback containing played and loaded progress as a fraction, and playedSeconds and loadedSeconds in seconds
  eg { played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }
onDurationCallback containing duration of the media, in seconds
onPauseCalled when media is paused
onBufferCalled when media starts buffering
onBufferEndCalled when media has finished buffering
  Works for files, YouTube and Facebook
onSeekCalled when media seeks with seconds parameter
onEndedCalled when media finishes playing
  Does not fire when loop is set to true
onErrorCalled when an error occurs whilst attempting to play media
onEnablePIPCalled when picture-in-picture mode is enabled
onDisablePIPCalled when picture-in-picture mode is disabled

Config prop

As of version 0.24, there is a single config prop to override the settings for the various players. If you are migrating from an earlier version, you must move all the old config props inside config:

<ReactPlayer
  url={url}
  config={{
    youtube: {
      playerVars: { showinfo: 1 }
    },
    facebook: {
      appId: '12345'
    }
  }}
/>

The old style config props still work but will produce a console warning:

<ReactPlayer
  url={url}
  youtubeConfig={{ playerVars: { showinfo: 1 } }}
  facebookConfig={{ appId: '12345' }}
/>

Settings for each player live under different keys:

KeyOptions
youtubeplayerVars: Override the default player vars
embedOptions: Override the default embed options
preload: Used for preloading
facebookappId: Your own Facebook app ID
soundcloudoptions: Override the default player options
preload: Used for preloading
vimeoplayerOptions: Override the default params
preload: Used for preloading
wistiaoptions: Override the default player options
mixcloudoptions: Override the default player options
dailymotionparams: Override the default player vars
preload: Used for preloading
twitchoptions: Override the default player options
fileattributes: Apply element attributes
forceVideo: Always render a <video> element
forceAudio: Always render an <audio> element
forceHLS: Use hls.js for HLS streams
forceDASH: Always use dash.js for DASH streams
hlsOptions: Override the default hls.js options
hlsVersion: Override the hls.js version loaded from cdnjs, default: 0.10.1
dashVersion: Override the dash.js version loaded from cdnjs, default: 2.9.2
Preloading

When preload is set to true for players that support it, a short, silent video is played in the background when ReactPlayer first mounts. This fixes a bug where videos would not play when loaded in a background browser tab.

Methods

Static Methods

MethodDescription
ReactPlayer.canPlay(url)Determine if a URL can be played. This does not detect media that is unplayable due to privacy settings, streaming permissions, etc. In that case, the onError prop will be invoked after attemping to play. Any URL that does not match any patterns will fall back to a native HTML5 media player.
ReactPlayer.canEnablePiP(url)Determine if a URL can be played in picture-in-picture mode
ReactPlayer.addCustomPlayer(CustomPlayer)Add a custom player. See Adding custom players
ReactPlayer.removeCustomPlayers()Remove any players that have been added using addCustomPlayer()

Instance Methods

Use ref to call instance methods on the player. See the demo app for an example of this.

MethodDescription
seekTo(amount, type)Seek to the given number of seconds, or fraction if amount is between 0 and 1
  type parameter lets you specify 'seconds' or 'fraction' to override default behaviour
getCurrentTime()Returns the number of seconds that have been played
  Returns null if unavailable
getSecondsLoaded()Returns the number of seconds that have been loaded
  Returns null if unavailable or unsupported
getDuration()Returns the duration (in seconds) of the currently playing media
  Returns null if duration is unavailable
getInternalPlayer()Returns the internal player of whatever is currently playing
  eg the YouTube player instance, or the <video> element when playing a video file
  Use getInternalPlayer('hls') to get the hls.js player
  Use getInternalPlayer('dash') to get the dash.js player
  Returns null if the internal player is unavailable
showPreview()When using light mode, returns to the preview overlay

Advanced Usage

Light player

The light prop will render a video thumbnail with simple play icon, and only load the full player once a user has interacted with the image. Noembed is used to fetch thumbnails for a video URL. Note that automatic thumbnail fetching for Facebook, Wistia, Mixcloud and file URLs are not supported, and ongoing support for other URLs is not guaranteed.

If you want to pass in your own thumbnail to use, set light to the image URL rather than true.

The styles for the preview image and play icon can be overridden by targeting the CSS classes react-player__preview, react-player__shadow and react-player__play-icon.

Responsive player

Set width and height to 100% and wrap the player in a fixed aspect ratio box to get a responsive player:

class ResponsivePlayer extends Component {
  render () {
    return (
      <div className='player-wrapper'>
        <ReactPlayer
          className='react-player'
          url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
          width='100%'
          height='100%'
        />
      </div>
    )
  }
}
.player-wrapper {
  position: relative;
  padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

See jsFiddle example

Single player imports

If you are only ever playing a single type of URL, you can import individual players to keep your bundle size down:

import YouTubePlayer from 'react-player/lib/players/YouTube'

<YouTubePlayer
  url='https://www.youtube.com/watch?v=d46Azg3Pm4c'
  playing
  controls
  // Other ReactPlayer props will work here
/>

See a list of available players here.

Standalone player

If you aren’t using React, you can still render a player using the standalone library:

<script src='https://unpkg.com/react-player/dist/ReactPlayer.standalone.js'></script>
<script>
  const container = document.getElementById('container')
  const url = 'https://www.youtube.com/watch?v=d46Azg3Pm4c'

  renderReactPlayer(container, { url, playing: true })

  function pausePlayer () {
    renderReactPlayer(container, { url, playing: false })
  }
</script>

See jsFiddle example

Adding custom players

If you have your own player that is compatible with ReactPlayer’s internal architecture, you can add it using addCustomPlayer:

import YourOwnPlayer from './somewhere';
ReactPlayer.addCustomPlayer(YourOwnPlayer);

Use removeCustomPlayers to clear all custom players:

ReactPlayer.removeCustomPlayers();

It is your responsibility to ensure that custom players keep up with any internal changes to ReactPlayer in later versions.

Using Bower

bower install react-player --save
<script src='bower_components/react/react.js'></script>
<script src='bower_components/react/react-dom.js'></script>
<script src='bower_components/react-player/dist/ReactPlayer.js'></script>
<script>
  ReactDOM.render(
    <ReactPlayer url='https://www.youtube.com/watch?v=d46Azg3Pm4c' playing />,
    document.getElementById('container')
  )
</script>

Mobile considerations

Due to various restrictions, ReactPlayer is not guaranteed to function properly on mobile devices. The YouTube player documentation, for example, explains that certain mobile browsers require user interaction before playing:

The HTML5 <video> element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it’s initiated by a user interaction (such as tapping on the player).

Multiple Sources and Tracks

When playing file paths, an array of sources can be passed to the url prop to render multiple <source> tags.

<ReactPlayer playing url={['foo.webm', 'foo.ogg']} />

You can also specify a type for each source by using objects with src and type properties.

<ReactPlayer
  playing
  url={[
    {src: 'foo.webm', type: 'video/webm'},
    {src: 'foo.ogg', type: 'video/ogg'}
  ]}
/>

<track> elements for subtitles can be added using fileConfig:

<ReactPlayer
  playing
  url='foo.webm'
  config={{ file: {
    tracks: [
      {kind: 'subtitles', src: 'subs/subtitles.en.vtt', srcLang: 'en', default: true},
      {kind: 'subtitles', src: 'subs/subtitles.ja.vtt', srcLang: 'ja'},
      {kind: 'subtitles', src: 'subs/subtitles.de.vtt', srcLang: 'de'}
    ]
  }}}
/>

Supported media

Contributing

See the contribution guidelines before creating a pull request.

Thanks