https://github.com/voidful/react-media-viewer
Ready to go Media Player Component for React.
https://github.com/voidful/react-media-viewer
audio react react-player react-video-player video
Last synced: 6 months ago
JSON representation
Ready to go Media Player Component for React.
- Host: GitHub
- URL: https://github.com/voidful/react-media-viewer
- Owner: voidful
- Created: 2021-08-22T15:19:50.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-08-25T06:16:13.000Z (almost 4 years ago)
- Last Synced: 2024-12-22T16:07:49.646Z (6 months ago)
- Topics: audio, react, react-player, react-video-player, video
- Language: JavaScript
- Homepage: https://voidful.github.io/react-media-viewer/
- Size: 275 KB
- Stars: 6
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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)`
## Install
`yarn add react-media-viewer` or `npm install --save react-media-viewer`
## Usage
### Basic example
```javascript
import Player from 'react-media-viewer';
const App = () => (
);
```
## 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
## Notes
`react-media-view` is built on top of `react-player` and `react-themed-player`.
[react-player](https://www.npmjs.com/package/react-player)
[vivek-nutcrackerz's react-simple-video-player](https://github.com/vivek-nutcrackerz/react-themed-player)