React-media-viewer NPM

react-media-viewer

Ready to go Media Player Component for React.
Supported Source:
YouTube SoundCloud Facebook Vimeo Twitch Streamable Wistia DailyMotion Mixcloud Vidyard mp4 webm ogv mp3 HLS(m3u8) DASH(mpd) npm.io

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

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"}`

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