react-player

What is react-player?

The react-player npm package is a React component for playing various types of media, including YouTube, SoundCloud, Vimeo, and more. It provides a simple interface for embedding media players in React applications.

What are react-player's main functionalities?

Playing YouTube Videos

This feature allows you to embed and play YouTube videos in your React application. The URL of the YouTube video is passed as a prop to the ReactPlayer component.

<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

Playing Vimeo Videos

This feature allows you to embed and play Vimeo videos. Similar to YouTube, you pass the Vimeo video URL as a prop to the ReactPlayer component.

<ReactPlayer url='https://vimeo.com/123456789' />

Playing SoundCloud Tracks

This feature allows you to embed and play SoundCloud tracks. The SoundCloud track URL is passed as a prop to the ReactPlayer component.

<ReactPlayer url='https://soundcloud.com/artist/track' />

Customizing Player Controls

This feature allows you to enable or disable player controls. By setting the 'controls' prop to true, you can display the default player controls.

<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' controls={true} />

Playing Local Media Files

This feature allows you to play local media files by providing the file path as a prop to the ReactPlayer component.

<ReactPlayer url='path/to/local/file.mp4' />

Other packages similar to react-player

video-react

The video-react package is a web video player built from the ground up for an HTML5 world using React library. It provides a set of React components for building video players with custom controls. Compared to react-player, video-react is more focused on HTML5 video and offers more customization options for the player controls.

react-video-js-player

The react-video-js-player package is a React component for Video.js, a popular HTML5 video player. It provides a simple interface for integrating Video.js into React applications. Compared to react-player, react-video-js-player is specifically designed for Video.js and offers more advanced features for video playback and customization.

react-h5-audio-player

The react-h5-audio-player package is a customizable audio player component for React. It provides a simple interface for embedding audio players with custom controls. Compared to react-player, react-h5-audio-player is focused solely on audio playback and offers more customization options for audio player controls.

README

ReactPlayer

A react component for playing a variety of URLs, including file paths, YouTube, Facebook, SoundCloud, Streamable, Vidme, Vimeo, Wistia and DailyMotion. Used by rplayr, an app to generate playlists from Reddit URLs.

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.

Polyfills

If you are using npm and need to support browsers without Promise you will need a Promise polyfill. To support Streamable or Vidme videos you will also need a fetch polyfill for browsers without fetch

Usage

npm install react-player --save

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 />
  }
}

See the demo source for a full example.

For platforms like Meteor 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:browser

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>

Demo

See a live demo, or run:

git clone https://github.com/CookPete/react-player.git
cd react-player
npm install
npm start
open http://localhost:3000

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

Props

Prop	Description	Default
url	The url of a video or song to play
playing	Set to true or false to pause or play the media	false
loop	Set to true or false to loop the media	false
controls	Set to true or false to display native player controls Note: Vimeo player controls are not configurable and will always display	false
volume	Sets the volume of the appropriate player	0.8
playbackRate	Sets the playback rate of the appropriate player	1
width	Sets the width of the player	640
height	Sets the height of the player	360
style	Add inline styles to the root element
progressFrequency	The time between onProgress callbacks, in milliseconds	1000
playsinline	Applies the playsinline attribute where supported	false

Callback props

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

Prop	Description
onReady	Called when media is loaded and ready to play. If playing is set to true, media will play immediately
onStart	Called when media starts playing
onPlay	Called when media starts or resumes playing after pausing or buffering
onProgress	Callback containing progress played, loaded (fraction), playedSeconds and loadedSeconds (seconds) eg { played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }
onDuration	Callback containing duration of the media, in seconds
onPause	Called when media is paused
onBuffer	Called when media starts buffering
onEnded	Called when media finishes playing
onError	Called when an error occurs whilst attempting to play media

Config props

These props allow you to override the parameters for the various players:

Prop	Description
soundcloudConfig	Configuration object for the SoundCloud player. Set clientId to your own SoundCloud app client ID. Set showArtwork to false to not load any artwork to display.
vimeoConfig	Configuration object for the Vimeo player. Set iframeParams to override the default params. Set preload for preloading.
youtubeConfig	Configuration object for the YouTube player. Set playerVars to override the default player vars. Set preload for preloading.
vidmeConfig	Configuration object for the Vidme player. Set format to use a certain quality of video, when available. Possible values: 240p, 480p, 720p, 1080p, dash, hls
dailymotionConfig	Configuration object for the DailyMotion player. Set params to override the default player vars. Set preload for preloading.
fileConfig	Configuration object for the file player. Set attributes to apply element attributes.
facebookConfig	Configuration object for the Facebook player. Set appId to your own Facebook app ID.

Preloading

Both youtubeConfig, vimeoConfig, dailymotionConfig props can take a preload value. Setting this to true will play a short, silent video in the background when ReactPlayer first mounts. This fixes a bug where videos would not play when loaded in a background browser tab.

Multiple Sources

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'}
  ]}
/>

Methods

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

Prop	Description
seekTo(fraction)	Seek to the specified fraction (from 0 to 1) of the currently playing media
getCurrentTime()	Returns the number of seconds that has been played. Returns null if duration is unavailable.
getDuration()	Returns the duration (in seconds) of the currently playing media. Returns null if duration is unavailable.

Supported media

• YouTube videos use the YouTube iFrame Player API
• Facebook videos use the Facebook Embedded Video Player API
• Soundcloud tracks are resolved and played in an <audio> element using the track’s stream_url
• Streamable videos are resolved and played in a <video> element using the track’s mp4 path
• Vidme videos are resolved and played in a <video> element using the track’s complete_url path
• Vimeo videos use the Vimeo Player API
• Wistia videos use the Wistia Player API
• DailyMotion videos use the DailyMotion Player API
• Supported file types are playing using <video> or <audio> elements

Contributing

See the contribution guidelines before creating a pull request.

Thanks

• Anyone who has contributed
• gaearon for his react-transform-boilerplate, which this repo is roughly based on.