{"id":20389809,"url":"https://github.com/ghondar/react-native-giraffe-player","last_synced_at":"2025-04-12T10:52:45.266Z","repository":{"id":57337256,"uuid":"67014167","full_name":"ghondar/react-native-giraffe-player","owner":"ghondar","description":"Video Player based on GiraffePlayer for react-native","archived":false,"fork":false,"pushed_at":"2017-10-06T16:29:36.000Z","size":10606,"stargazers_count":13,"open_issues_count":4,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T05:51:07.464Z","etag":null,"topics":["android","player","react-native","video","video-player"],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ghondar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-31T07:27:56.000Z","updated_at":"2022-05-06T10:52:40.000Z","dependencies_parsed_at":"2022-09-10T02:51:25.428Z","dependency_job_id":null,"html_url":"https://github.com/ghondar/react-native-giraffe-player","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghondar%2Freact-native-giraffe-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghondar%2Freact-native-giraffe-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghondar%2Freact-native-giraffe-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghondar%2Freact-native-giraffe-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghondar","download_url":"https://codeload.github.com/ghondar/react-native-giraffe-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248557844,"owners_count":21124165,"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":["android","player","react-native","video","video-player"],"created_at":"2024-11-15T03:19:47.537Z","updated_at":"2025-04-12T10:52:45.239Z","avatar_url":"https://github.com/ghondar.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"### React-Native-Giraffe-Player\n\n\u003e Video Player based on [GiraffePlayer](https://github.com/tcking/GiraffePlayer) for react-native\n\n*Only Android support now.*\n\n#### Integrate\n\n##### Android\n\n##### Install via npm\n`npm i react-native-giraffe-player --save`\n\n##### Add dependency to `android/settings.gradle`\n```\n...\ninclude ':ijkplayer-java'\nproject(':ijkplayer-java').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-giraffe-player/android/ijkplayer-java')\n\ninclude ':giraffeplayer'\nproject(':giraffeplayer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-giraffe-player/android/giraffeplayer')\n\ninclude ':react-native-giraffe-player'\nproject(':react-native-giraffe-player').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-giraffe-player/android/player')\n```\n\n##### Add `android/app/build.gradle`\n```\n...\ndependencies {\n    ...\n    compile project(':react-native-giraffe-player')\n}\n```\n\n#### If you're using react-native 0.25~0.29, follow these steps\n\n##### Register module in `MainActivity.java`\n```Java\nimport com.ghondar.gplayer.*;  // \u003c--- import\n\n@Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        mReactRootView = new ReactRootView(this);\n\n        mReactInstanceManager = ReactInstanceManager.builder()\n                .setApplication(getApplication())\n                .setBundleAssetName(\"index.android.bundle\")\n                .setJSMainModuleName(\"index.android\")\n                .addPackage(new MainReactPackage())\n                .addPackage(new GPlayerPackage())  // \u003c------- here\n                .setUseDeveloperSupport(BuildConfig.DEBUG)\n                .setInitialLifecycleState(LifecycleState.RESUMED)\n                .build();\n\n        mReactRootView.startReactApplication(mReactInstanceManager, \"example\", null);\n\n        setContentView(mReactRootView);\n    }\n```\n\n#### If you're using react-native 0.30+, follow these steps\n\n##### Register module in `MainApplication.java`\n```Java\nimport com.ghondar.gplayer.*;  // \u003c--- import\n\n@Override\n protected List\u003cReactPackage\u003e getPackages() {\n   return Arrays.\u003cReactPackage\u003easList(\n      new MainReactPackage(),\n      new GPlayerPackage()  // \u003c------- here\n   );\n }\n```\n\n#### Usage\n\n```Javascript\nimport React, { Component, View, Text, TouchableHighlight } from 'react-native'\n\nimport GPlayer from 'react-native-giraffe-player'\n\nclass Example extends Component {\n\n  componentWillMount() {\n    GPlayer.addEventListener('onRenderingStart', this.onRenderingStart);\n  }\n  \n  componentDidMount() {\n    // Config Video Player before playing\n    GPlayer.setTitle('Video Title');\n    GPlayer.setFullScreenOnly(true);\n    GPlayer.setShowNavIcon(false);\n  }\n  \n  componentWillUnmount() {\n    GPlayer.removeEventListener('onRenderingStart', this.onRenderingStart);\n  }\n\n  onRenderingStart() {\n    GPlayer.getDuration()\n      .then((data) =\u003e {\n        console.log(data);\n      })\n      .catch((e) =\u003e {\n        console.log(e);\n      });\n  }\n\n  render() {\n\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cText style={styles.welcome}\u003e\n          Welcome to React Native!\n        \u003c/Text\u003e\n        \u003cText style={styles.instructions}\u003e\n          To get started, edit index.android.js\n        \u003c/Text\u003e\n        \u003cText style={styles.instructions}\u003e\n          Double tap R on your keyboard to reload,{'\\n'}\n          Shake or press menu button for dev menu\n        \u003c/Text\u003e\n        \u003cTouchableHighlight onPress={() =\u003e { GPlayer.play('http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8'); }}\u003e\n          \u003cText\u003e\n            Play Video!!\n          \u003c/Text\u003e\n        \u003c/TouchableHighlight\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n\nexport default Example\n\n```\n\n## API\n### Constants\n* `SCALETYPE_FITPARENT` - scale the video uniformly (maintain the video's aspect ratio) so that both dimensions (width and height) of the video will be equal to or **less** than the corresponding dimension of the view. like ImageView's `CENTER_INSIDE`.\n* `SCALETYPE_FILLPARENT` - scale the video uniformly (maintain the video's aspect ratio) so that both dimensions (width and height) of the video will be equal to or **larger** than the corresponding dimension of the view .like ImageView's `CENTER_CROP`.\n* `SCALETYPE_WRAPCONTENT` - center the video in the view,if the video is less than view perform no scaling,if video is larger than view then scale the video uniformly so that both dimensions (width and height) of the video will be equal to or **less** than the corresponding dimension of the view.\n* `SCALETYPE_FITXY` - scale in X and Y independently, so that video matches view exactly.\n* `SCALETYPE_16_9` - scale x and y with aspect ratio 16:9 until both dimensions (width and height) of the video will be equal to or **less** than the corresponding dimension of the view.\n* `SCALETYPE_4_3` - scale x and y with aspect ratio 4:3 until both dimensions (width and height) of the video will be equal to or **less** than the corresponding dimension of the view.\n\n### Config\n* `setTitle(title)` - set title =\u003e title: String\n* `setFullScreenOnly(val)` - set fullscreen =\u003e val: Boolean\n* `setShowNavIcon(val)` - set back button =\u003e val: Boolean\n\n* `setScaleType(SCALE_TYPE)` - set video scale type =\u003e SCALE_TYPE: String\n\n### initialize\n* `play(url)` - play video =\u003e url: String\n\n### initialized\n* `setScaleType(SCALE_TYPE)` - set video scale type =\u003e SCALE_TYPE: String\n* `stop()` - stop video\n* `pause()` - pause video\n* `start()` - start video\n* `forward(percent)` - forward video, example: forward(0.1) =\u003e percent: Float\n* `backward(percent)` - backward video, example: backward(0.1) =\u003e percent: Float\n* `toggleAspectRatio()` - toggle video scale type\n* `seekTo(milliseconds, showControlPanel)` - seek to specify position and show or hide control =\u003e milliseconds: Integer, showControlPanel: boolean\n* `getCurrentPosition()` - get current position, example: `getCurrentPosition.then(position =\u003e {...}).catch(e =\u003e {..})` =\u003e position: Integer\n* `getDuration()` - get video duration, example: `getDuration.then(duration =\u003e {...}).catch(e =\u003e {..})` =\u003e duration: Integer\n\n### Events\n* `onBufferingStart` - when have loaded buffer\n* `onBufferingEnd`  - when have finalized buffer\n* `onNetworkBandwidth` - get network bandwidth progress =\u003e milliseconds: Integer\n* `onRenderingStart` - where show video\n* `onControlPanelVisibilityChange` - where change control panel visibility\n* `onComplete` - where complete configuration\n* `onError` - get possible errors\n\n#### LICENSE\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghondar%2Freact-native-giraffe-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghondar%2Freact-native-giraffe-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghondar%2Freact-native-giraffe-player/lists"}