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

react-player

A react component for playing media from YouTube, SoundCloud or Vimeo.

Usage

npm install react-player --save

import React, { Component } from 'react'
import ReactPlayer from 'react-player'

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

See App.js for a full example

Demo

The quickest way to see it in action is to checkout the repo and run the demo:

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

Props

Prop	Description
url	The url of a video or song to play
playing	Set to true or false to pause or play the media
volume	Sets the volume of the appropriate player
onProgress	Callback containing played and loaded progress as a fraction eg { played: 0.12, loaded: 0.34 }
onPlay	Called when media starts or resumes playing after pausing or buffering
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

Methods

There is a static method ReactPlayer.canPlay(url) to determine if a URL can be played by the media player. Note that this does not detect media that is unplayable due to streaming permissions etc. In that case, onError will occur after attemping to play.

To seek to a certain part of the media, there is a seekTo(fraction) instance method that will seek to the appropriate place in the media. See App.js for an example of this using refs.

Linting

This project uses standard code style.

npm run lint

Thanks

• Big thanks to gaearon for his react-hot-boilerplate, which this repo is roughly based on.

Changelog

v0.0.4

27 August 2015

• Add Array.find() polyfill #1
• Add fetch polyfill libraries to package.json #1