@wbe/react-video-player

React video player is a wrapper component for native, vimeo and youtube video.

Installation

$ npm install -s @wbe/react-video-player

How to use

Import VideoPlayer:

import { VideoPlayer, EVideoType } from "@wbe/react-video-player";
// ...
const App = () => {
  return (
    <VideoPlayer
      type={EVideoType.NATIVE}
      className={`native`}
      url={"https://video-url"}
      play={true}
      style={{ display: "block" }}
      controls={false}
      muted={true}
      autoPlay={true}
      onPause={e => console.log("pause callback", e)}
      onPlay={e => console.log("play callback", e)}
      onEnded={e => console.log("ended callback", e)}
      onReady={e => console.log("ready callback", e)}
    />
  );
};

Or import an available sub video component to access extra available props:

• NativeVideo
• VimeoVideo
• YoutubeVideo

import { YoutubeVideo } from "@wbe/react-video-player";
// ...
const App = () => {
  return (
    <YoutubeVideo
      id={"youtube-id"}
      play={true}
      // specific props available only for youtube video
      fs={false}
    />
  );
};

You can easily create your own VideoPlayer component and import sub video component as needed.

Parameters / Props

props (* non optional)	type	description	default value	@type
type*	EVideoType	Type of video	/	/
id	string	Video ID (ID will overwrite URL)	/	VIMEO & YOUTUBE
url	string	Video URL	/	all
play	boolean	Play, pause, resume video	/	all
style	CSSProperties	Add root component style	/	all
autoPlay	boolean	Autoplay video on init	false	all
controls	boolean	Show controls on video	true	all
loop	boolean	Loop video	false	all
playsInline	boolean	Plays inline video on mobile	true	all
muted	boolean	Mute video	false	all
onReady	(event:any) => void	Execute function when video is ready	/	all
onPlay	(event:any) => void	Execute callback function on play state	/	all
onPause	(event:any) => void	Execute callback function on pause state	/	all
onEnded	(event:any) => void	Execute callback function on ended state	/	all
className	string	class list	/	all