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