video

Ready to go Media Player Component for React

Sep 04, 2021
Ready to go Media Player Component for React

react-media-viewer

Ready to go Media Player Component for React.

View Demo View Github

Supported Source:
YouTube SoundCloud Facebook Vimeo Twitch Streamable Wistia DailyMotion Mixcloud Vidyard mp4 webm ogv mp3 HLS(m3u8) DASH(mpd)

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"/> );

Props

* = Required

PropDescriptiondefault
url*Url of the video file to play
widthWidth of the media viewer640
heightHeight of the media viewer360
styleStyle of media viewerfalse
playingIf set to true, the video will automatically playfalse
metadataMedia metedata shown on top-bar{title: "Title",subtitle: "subtitle"}
themeTheme setting{bgColor: "#000000",textColor: "#ffffff",topBarHeight: "70px",bottomBarHeight: "50px",highlightColor: "#ff0000"}

Supported source

Sourcedemo link
YouTubehttps://www.youtube.com/watch?v=oUFJJNQGwhk
SoundCloudhttps://soundcloud.com/miami-nights-1984/accelerated
Facebookhttps://www.facebook.com/facebook/videos/10153231379946729/
Vimeohttps://vimeo.com/90509568
Twitchhttps://www.twitch.tv/videos/106400740
Streamablehttps://streamable.com/moo
Wistiahttps://home.wistia.com/medias/e4a27b971d
DailyMotionhttps://www.dailymotion.com/video/x5e9eog
Mixcloudhttps://www.mixcloud.com/mixcloud/meet-the-curators/
Vidyardhttps://video.vidyard.com/watch/YBvcF2BEfvKdowmfrRwk57
mp4https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4
webmhttps://test-videos.co.uk/vids/bigbuckbunny/webm/vp8/360/Big_Buck_Bunny_360_10s_1MB.webm
ogvhttps://filesamples.com/samples/video/ogv/sample_640x360.ogv
mp3https://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
Recommended