react-media-viewer

Media Player Component for React.

Install

yarn add react-media-viewer or npm install --save react-media-viewer

Usage

Basic example

import Player from 'react-media-viewer';

const App = () => (
    <Player url="/video.mp4"/>
);

Supported source

Source	demo link
YouTube	https://www.youtube.com/watch?v=oUFJJNQGwhk
SoundCloud	https://soundcloud.com/miami-nights-1984/accelerated
Facebook	https://www.facebook.com/facebook/videos/10153231379946729/
Vimeo	https://vimeo.com/90509568
Twitch	https://www.twitch.tv/videos/106400740
Streamable	https://streamable.com/moo
Wistia	https://home.wistia.com/medias/e4a27b971d
DailyMotion	https://www.dailymotion.com/video/x5e9eog
Mixcloud	https://www.mixcloud.com/mixcloud/meet-the-curators/
Vidyard	https://video.vidyard.com/watch/YBvcF2BEfvKdowmfrRwk57
mp4	https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4
webm	https://test-videos.co.uk/vids/bigbuckbunny/webm/vp8/360/Big_Buck_Bunny_360_10s_1MB.webm
ogv	https://filesamples.com/samples/video/ogv/sample_640x360.ogv
mp3	https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3
HLS(m3u8)	https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8
DASH(mpd)	http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd

Props

* = Required

Prop	Description	default
url*	Url of the video file to play
width	Width of the media viewer	640
height	Height of the media viewer	360
style	Style of media viewer	false
playing	If set to true, the video will automatically play	false
metadata	Media metedata shown on top-bar	{title: "Title",subtitle: "subtitle"}
theme	Theme setting	{bgColor: "#000000",textColor: "#ffffff",topBarHeight: "70px",bottomBarHeight: "50px",highlightColor: "#ff0000"}

Notes

react-media-view is built on top of react-player and react-simple-video-player.
react-player
vivek-nutcrackerz's react-themed-player