Video Player component

A responsive themed video player component based on https://cookpete.com/react-player/.

Install

npm i @wethecurious/wtc-ui-library

---

Usage

Import it into your project

import { VideoPlayer } from '@wethecurious/wtc-ui-library'

Basic Implementation

Accepts a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion. Supports m3u8.

<VideoPlayer
  videoUrl="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
  width={640}
  height={360}
/>

Controls

Vimeo, Twitch and Wistia player will always display controls from external SDK

Autoplay

As of Chrome 66, videos must be muted in order to play automatically. Some players, like Facebook, cannot be unmuted until the user interacts with the video, so you may want to enable controls to allow users to unmute videos themselves

Custom Aspect Ratio

Include the aspect ratio and exclude height to force the player to constrain to an aspect ratio

<VideoPlayer
  videoUrl="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
  isPlaying={false}
  width={640}
  aspectRatio={[1, 1]}
/>

Responsive player

Include the aspect ratio and exclude width/height to automatically fit to container

<VideoPlayer
  videoUrl="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
  isPlaying={false}
  aspectRatio={[16, 9]}
/>

Prop	Description	Default
videoUrl	The video url to play
isPlaying	Set true to enable autoplay
width	Set the width (in pixels) of the player. Exclude to fit to container
height	Set the height (in pixels) of the player.
aspectRatio	Set the aspect ratio of the player	[16, 9]
audioLevel	Sets the audio level between 0 and 1
posterUrl	Sets the poster url which shows whilst the player loads
isShowClosedCaptions	Set to true or false to toggle display of closed captions	false
captions	An object containing the captions including {kind, src, srcLang}
onPlay	Callback function when player plays
onPause	Callback function when player pauses	-100
onSeek	Callback function when player seeks
style	Add additional css styles