Video Player Vue.js
Components

Best React.js Video Player Components 2021

joel

Best React.js VideoPlayer Components

You may be building a web app that requires some sort of videoplayer. If so then here are some of the best react.js components you may use.

(a). ReactPlayer

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

Installation

npm install react-player # or yarn add react-player

How to Use

import React from 'react'
import ReactPlayer from 'react-player'

// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

By default, ReactPlayer supports many different types of url. If you only ever use one type, use imports such as react-player/youtube to reduce your bundle size. See config keys for all player keys.

import React from 'react'
import ReactPlayer from 'react-player/youtube'

// Only loads the YouTube player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

If your build system supports import() statements, use react-player/lazy to lazy load the appropriate player for the url you pass in. This adds several reactPlayer chunks to your output, but reduces your main bundle size.

import React from 'react'
import ReactPlayer from 'react-player/lazy'

// Lazy load the YouTube player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

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.

Props

Prop Description Default
url The url of a video or song to play
  ◦  Can be an array or MediaStream object
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.
  ◦  For Vimeo videos, hiding controls must be enabled by the video owner. false
light Set 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
volume Set the volume of the player, between 0 and 1
  ◦  null uses default volume on all players #357 null
muted Mutes the player
  ◦  Only works if volume is set false
playbackRate Set the playback rate of the player
  ◦  Only supported by YouTube, Wistia, and file paths 1
width Set the width of the player 640px
height Set the height of the player 360px
style Add inline styles to the root element {}
progressInterval The time between onProgress callbacks, in milliseconds 1000
playsinline Applies the playsinline attribute where supported false
pip Set to true or false to enable or disable picture-in-picture mode
  ◦  Only available when playing file URLs in certain browsers false
stopOnUnmount If you are using pip you may want to use stopOnUnmount={false} to continue playing in picture-in-picture mode even after ReactPlayer unmounts true
fallback Element or component to use as a fallback if you are using lazy loading null
wrapper Element or component to use as the container element div
playIcon Element or component to use as the play icon in light mode
previewTabIndex Set the tab index to be used on light mode 0
config Override options for the various players, see config prop

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 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 }
onDuration Callback containing duration of the media, in seconds
onPause Called when media is paused
onBuffer Called when media starts buffering
onBufferEnd Called when media has finished buffering
  ◦  Works for files, YouTube and Facebook
onSeek Called when media seeks with seconds parameter
onEnded Called when media finishes playing
  ◦  Does not fire when loop is set to true
onError Called when an error occurs whilst attempting to play media
onClickPreview Called when user clicks the light mode preview
onEnablePIP Called when picture-in-picture mode is enabled
onDisablePIP Called when picture-in-picture mode is disabled

Config prop

There is a single config prop to override settings for each type of player:

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

Settings for each player live under different keys:

Key Options
youtube playerVars: Override the default player vars

embedOptions: Override the default embed options
onUnstarted: Called when state changes to unstarted (usually when video fails to autoplay) |
| facebook | appId: Your own Facebook app ID
version: Facebook SDK version
playerId: Override player ID for consistent server-side rendering (use with react-uid)
attributes: Extra data attributes to pass to the fb-video element |
| soundcloud | options: Override the default player options |
| vimeo | playerOptions: Override the default params |
| wistia | options: Override the default player options
playerId: Override player ID for consistent server-side rendering (use with react-uid) |
| mixcloud | options: Override the default player options |
| dailymotion | params: Override the default player vars |
| twitch | options: Override the default player options
playerId: Override player ID for consistent server-side rendering (use with react-uid) |
| file | attributes: 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
forceFLV: Always use flv.js
hlsOptions: Override the default hls.js options
hlsVersion: Override the hls.js version loaded from jsdelivr, default: 0.13.1
dashVersion: Override the dash.js version loaded from cdnjs, default: 2.9.2
flvVersion: Override the flv.js version loaded from jsdelivr, default: 1.5.0 |

Methods

Static Methods

Method Description
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.

Method Description
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-playerpreview, react-playershadow 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;
}

Supported media

reference

Read more here.

(b). video-react

Video.React is a web video player built from the ground up for an HTML5 world using React library.

How to Install

Install video-react and peer dependencies via NPM

npm install --save video-react react react-dom

import css in your app or add video-react styles in your page

import '~video-react/dist/video-react.css'; // import css

or

@import '~video-react/styles/scss/video-react'; // or import scss

or

<link
  rel="stylesheet"
  href="https://video-react.github.io/assets/video-react.css"
/>

How to use

Import the components you need, example:

import React from 'react';
import { Player } from 'video-react';

export default props => {
  return (
    <Player>
      <source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
    </Player>
  );
};

reference

Read more here.

(c). Griffith

  • Streaming: Griffith makes streaming easy. Whether your video format is mp4 or hls, Griffith can use Media Source Extension (MSE) for segment loading.
  • Extensibility: Griffith makes it simple to support video features in React apps. It also supports the UMD (Universal Module Definition) patterns for direct use in the browser if your application is not based on React.
  • Reliability: Griffith has been widely used in the web and mobile web of Zhihu.

Usage

React application

yarn add griffith
import Player from 'griffith'

const sources = {
  hd: {
    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',
  },
  sd: {
    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
  },
}

render(<Player sources={sources} />)

Detailed usage

Note: Griffith is not supporting SSR application

non-React application

<script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>
const sources = {
  hd: {
    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',
  },
  sd: {
    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
  },
}

Griffith.createPlayer(element).render({sources})

Standalone mode detailed usage

Reference

Read more here.

Related Posts

React Tooltips Example and Libraries
Components

React.js Tooltip – Examples and Libraries

joel
React Facebook
Components

Best React.js Facebook Components 2021

joel

Leave a Reply

Your email address will not be published. Required fields are marked *