{"id":23725970,"url":"https://github.com/voidful/react-media-viewer","last_synced_at":"2025-09-04T02:31:19.055Z","repository":{"id":57334462,"uuid":"398831608","full_name":"voidful/react-media-viewer","owner":"voidful","description":"Ready to go Media Player Component for React.","archived":false,"fork":false,"pushed_at":"2021-08-25T06:16:13.000Z","size":282,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-09T18:42:27.994Z","etag":null,"topics":["audio","react","react-player","react-video-player","video"],"latest_commit_sha":null,"homepage":"https://voidful.github.io/react-media-viewer/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/voidful.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-22T15:19:50.000Z","updated_at":"2022-11-01T09:09:24.000Z","dependencies_parsed_at":"2022-09-05T08:01:22.991Z","dependency_job_id":null,"html_url":"https://github.com/voidful/react-media-viewer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/voidful/react-media-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voidful%2Freact-media-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voidful%2Freact-media-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voidful%2Freact-media-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voidful%2Freact-media-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/voidful","download_url":"https://codeload.github.com/voidful/react-media-viewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voidful%2Freact-media-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273541897,"owners_count":25124056,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","react","react-player","react-video-player","video"],"created_at":"2024-12-31T00:17:58.167Z","updated_at":"2025-09-04T02:31:18.731Z","avatar_url":"https://github.com/voidful.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-media-viewer\n\nReady to go Media Player Component for React.    \nSupported Source:    \n`YouTube` `SoundCloud` `Facebook` `Vimeo` `Twitch` `Streamable` `Wistia` `DailyMotion` `Mixcloud` `Vidyard` `mp4` `webm` `ogv` `mp3` `HLS(m3u8)` `DASH(mpd)`\n![](https://i.imgur.com/x8L52lW.png)\n\n\n## Install\n\n`yarn add react-media-viewer` or `npm install --save react-media-viewer`\n\n## Usage\n\n### Basic example\n\n```javascript\nimport Player from 'react-media-viewer';\n\nconst App = () =\u003e (\n    \u003cPlayer url=\"/video.mp4\"/\u003e\n);\n```\n## Props\n\n`*` = Required\n\nProp | Description | default\n---- | ----------- | -------\n`url*`| Url of the video file to play |\n`width` | Width of the media viewer | `640`\n`height` | Height of the media viewer | `360`\n`style` | Style of media viewer | `false`\n`playing` | If set to true, the video will automatically play | `false`\n`metadata` | Media metedata shown on top-bar | `{title: \"Title\",subtitle: \"subtitle\"}`\n`theme` | Theme setting | `{bgColor: \"#000000\",textColor: \"#ffffff\",topBarHeight: \"70px\",bottomBarHeight: \"50px\",highlightColor: \"#ff0000\"}`\n\n## Supported source\n\nSource | demo link\n---- | ----------- \n`YouTube`| https://www.youtube.com/watch?v=oUFJJNQGwhk\n`SoundCloud` | https://soundcloud.com/miami-nights-1984/accelerated\n`Facebook` | https://www.facebook.com/facebook/videos/10153231379946729/\n`Vimeo` | https://vimeo.com/90509568\n`Twitch` | https://www.twitch.tv/videos/106400740\n`Streamable` | https://streamable.com/moo\n`Wistia` | https://home.wistia.com/medias/e4a27b971d\n`DailyMotion` | https://www.dailymotion.com/video/x5e9eog\n`Mixcloud` | https://www.mixcloud.com/mixcloud/meet-the-curators/\n`Vidyard` | https://video.vidyard.com/watch/YBvcF2BEfvKdowmfrRwk57\n`mp4` | https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4\n`webm` | https://test-videos.co.uk/vids/bigbuckbunny/webm/vp8/360/Big_Buck_Bunny_360_10s_1MB.webm\n`ogv` | https://filesamples.com/samples/video/ogv/sample_640x360.ogv\n`mp3` | https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3\n`HLS(m3u8)` | https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8\n`DASH(mpd)` | http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd\n\n\n## Notes\n\n`react-media-view` is built on top of `react-player` and `react-themed-player`.  \n[react-player](https://www.npmjs.com/package/react-player)  \n[vivek-nutcrackerz's react-simple-video-player](https://github.com/vivek-nutcrackerz/react-themed-player)  \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoidful%2Freact-media-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvoidful%2Freact-media-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoidful%2Freact-media-viewer/lists"}