How to create a video player in ReactJs? – Code Example

Today in this article we will see how we can create a video player in ReactJs using react-player library. React-player provides components which can be used to play videos of Youtube, DailyMotion, Vimeo, Twitch, SoundCloud etc.

These are the various urls supported by react-player –

• YouTube videos
• Facebook videos
• SoundCloud tracks
• Streamable videos
• Vimeo videos
• Wistia videos
• Twitch videos
• DailyMotion videos
• Vidyard videos
• Kaltura

Installation

Let’s install react-player using npm or yarn –

// Using npm
npm install react-player

// Using yarn
yarn add react-player

Code Examples

1. Playing Youtube Videos

You can play youtube videos by loading youtube url in ReactPlayer component. Look at this code –

import React from 'react'
import ReactPlayer from 'react-player/youtube'
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container); 
root.render(<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />)

2. Creating a video playlist

You can create a video playlist by passing multiple video links as array elements to url prop of ReactPlayer.

import React from 'react'
import ReactPlayer from 'react-player/youtube'
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container); 
root.render(<ReactPlayer url={[
    'https://www.youtube.com/watch?v=oUFJJNQGwhk',
    'https://www.youtube.com/watch?v=jNgP6d9HraI'
  ]} />)

3. Playing one video of many supported extensions

In html <video> tag we supply sources in <source> tag to let browser choose the best format it can play. We can do the same in this library too –

import React from 'react'
import ReactPlayer from 'react-player/youtube'
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container); 
root.render(<ReactPlayer
  playing
  url={[
    {src: 'foo.webm', type: 'video/webm'},
    {src: 'foo.ogg', type: 'video/ogg'}
  ]}
/>)

4. Adding subtitle tracks

You can add subtitle tracks using tracks property in config props –

import React from 'react'
import ReactPlayer from 'react-player/youtube'
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container); 
root.render(<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'}
    ]
  }}}
/>)

5. Playing Facebook Videos

For playing Facebook videos you will need to create facebook app and get the app id. Then pass the app id and the sdk version to the config param –

import React from 'react'
import ReactPlayer from 'react-player/youtube'
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container); 
root.render(<ReactPlayer
  playing
  url={FACEBOOK_VIDEO_URL}
  config={{
    facebook: {
      appId: APP_ID,
      version: SDK_VERSION
    }
  }}
/>)