React.js Media Player For Streaming Youtube,Facebook Videos Using react-player Library Full Tutorial With Examples

React.js Media Player For Streaming Youtube,Facebook Videos Using react-player Library Full Tutorial With Examples

 

Welcome folks today in this blog post we will be looking react-player for embedding and streaming videos of youtube and facebook. All the source code of examples are given below.

 

 

 

Install

 

 

 

npm i react-player

 

 

 

Basic Usage

 

 

Streaming and Embedding Youtube Video

 

 

 

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


export default function App() {
  return (
    <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

  );
}

 

 

 

 

 

 

 

 

Options

 

 

 

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  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
wrapper Element or component to use as the container element div
playIcon Element or component to use as the play icon in light mode
config Override options for the various players, see config prop
See also  Join 10 React.js and React Native Whatsapp Group Links For Javascript Web Developers in 2021 | React.js Whatsapp Group Links For Web Developers | Whatsapp Group Links For React.js Javascript Programmers

 

 

 

Playing Multiple Videos

 

 

<ReactPlayer
  url={[
    'https://www.youtube.com/watch?v=oUFJJNQGwhk',
    'https://www.youtube.com/watch?v=jNgP6d9HraI'
  ]}
/>

 

 

 

 

 

 

Leave a Reply