{"id":13776777,"url":"https://github.com/ldn0x7dc/react-native-media-kit","last_synced_at":"2025-05-11T10:31:18.903Z","repository":{"id":57338312,"uuid":"60341518","full_name":"ldn0x7dc/react-native-media-kit","owner":"ldn0x7dc","description":"Video(and audio) component for react-native apps, supporting both iOS and Android. A unified and elegant player controller is provided by default. The API is similar with HTML video.","archived":false,"fork":false,"pushed_at":"2018-12-13T13:17:48.000Z","size":23845,"stargazers_count":201,"open_issues_count":41,"forks_count":70,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-06T23:52:13.762Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","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/ldn0x7dc.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":"2016-06-03T11:00:37.000Z","updated_at":"2025-03-22T10:41:22.000Z","dependencies_parsed_at":"2022-08-31T03:51:47.852Z","dependency_job_id":null,"html_url":"https://github.com/ldn0x7dc/react-native-media-kit","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldn0x7dc%2Freact-native-media-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldn0x7dc%2Freact-native-media-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldn0x7dc%2Freact-native-media-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldn0x7dc%2Freact-native-media-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ldn0x7dc","download_url":"https://codeload.github.com/ldn0x7dc/react-native-media-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253551678,"owners_count":21926335,"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","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":[],"created_at":"2024-08-03T18:00:32.904Z","updated_at":"2025-05-11T10:31:14.384Z","avatar_url":"https://github.com/ldn0x7dc.png","language":"Java","funding_links":[],"categories":["\u003ca name=\"Image-\u0026-Audio-\u0026-Video-\u0026-Docs:-Native-Modules\"\u003eImage, Audio, Video \u0026 Docs: Native Modules\u003c/a\u003e","Java"],"sub_categories":[],"readme":"# react-native-media-kit\n\nVideo(and audio) component for react-native apps, supporting both iOS and Android, with API similar to HTML video.\n\nA default set of controls is provided to play/pause, seek and to display current playback and buffer progress.\n\nRuns on react-native 0.28+ (The limit exists due to [ActivityIndicator](https://facebook.github.io/react-native/docs/activityindicator.html) comes after 0.28).\n\nSupported media types:\n\n* iOS: Should be same as those supported by [AVPlayer](https://developer.apple.com/library/ios/documentation/AVFoundation/Reference/AVPlayer_Class/)\n\n\n* Android: Shold be same as those supported by [ExoPlayer](https://github.com/google/ExoPlayer)\n\n![](Demo/demo.gif).\n\n## Install\n\n`npm install --save react-native-media-kit@latest `\n\n#### iOS\n\nFor now, just drag ***react-native-media-kit.xcodeproj*** into your Xcode project and link the **libreact-native-media-kit.a** library.\n\n#### Android\n\n**android/settings.gradle**\n\n```\ninclude ':react-native-media-kit'\nproject(':react-native-media-kit').projectDir = new File('../node_modules/react-native-media-kit/android')\n```\n\n**android/app/build.gradle**\n\n```\ndependencies {\n    ...\n    compile project(':react-native-media-kit')\n}\n```\n\n**MainActivity.java (or MainApplication on rn 0.29+)**\n\n```\nimport com.greatdroid.reactnative.media.MediaKitPackage;\n...\nprotected List\u003cReactPackage\u003e getPackages() {\n    return Arrays.\u003cReactPackage\u003easList(\n        new MainReactPackage(),\n            new MediaKitPackage()\n    );\n}\n```\n\n\n\n## Documentation\n\n```\nimport {Video} from 'react-native-media-kit';\n...\nrender() {\n  return (\n  \t\u003cVideo\n      style={{width: width, height: width / (16/9)}}\n      src={'http://v.yoai.com/femme_tampon_tutorial.mp4'}\n      autoplay={false}\n      preload={'none'}\n      loop={false}\n      controls={true}\n      muted={false}\n      poster={'http://static.yoaicdn.com/shoppc/images/cover_img_e1e9e6b.jpg'}\n    /\u003e\n  );\n}\n\n```\n\n### API\n\nThe API is designed to mimics html [`\u003cvideo /\u003e`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video). (*For now, the Video and Audio component are identical*)\n\n##### Properties\n\n| key                  | value                                    | iOS  | Android |\n| -------------------- | ---------------------------------------- | ---- | ------- |\n| src                  | the URL of the video                     | OK   | OK      |\n| autoplay             | true to automatically begins to play. Default is false. | OK   | OK      |\n| preload              | can be 'none', 'auto'. Default is 'none'. | OK   | OK      |\n| loop                 | true to automatically seek back to the start upon reaching the end of the video. Default is 'false'. | OK   | OK      |\n| controls             | true to show controls to allow user to control video playback, including seeking, and pause/resume playback. Default is true. | OK   | OK      |\n| poster               | an image URL indicating a poster frame to show until the user plays. | OK   | OK      |\n| muted                | true to silence the audio. Default is false. | OK   | OK      |\n| onPlayerPaused       |                                          | OK   | OK      |\n| onPlayerPlaying      |                                          | OK   | OK      |\n| onPlayerFinished     |                                          | OK   | OK      |\n| onPlayerBuffering    |                                          | OK   | OK      |\n| onPlayerBufferOK     |                                          | OK   | OK      |\n| onPlayerProgress     |                                          | OK   | OK      |\n| onPlayerBufferChange |                                          | OK   | OK      |\n\n- ***pause***\n- ***play***\n- ***stop***\n- ***seekTo***\n\n\nFor details about the usage of above APIs, check `library/MediaPlayerView.js`.\n\n\n\n## TODO\n\n* background play","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fldn0x7dc%2Freact-native-media-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fldn0x7dc%2Freact-native-media-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fldn0x7dc%2Freact-native-media-kit/lists"}