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 |