{"id":18498042,"url":"https://github.com/apivideo/api.video-reactnative-player","last_synced_at":"2025-09-10T01:45:34.977Z","repository":{"id":37977207,"uuid":"372421979","full_name":"apivideo/api.video-reactnative-player","owner":"apivideo","description":"React Native video player","archived":false,"fork":false,"pushed_at":"2024-10-21T12:38:11.000Z","size":1963,"stargazers_count":17,"open_issues_count":7,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-23T19:44:41.930Z","etag":null,"topics":["player","react-native","video","video-player"],"latest_commit_sha":null,"homepage":"https://api.video","language":"TypeScript","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/apivideo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-31T07:36:16.000Z","updated_at":"2025-02-25T09:23:14.000Z","dependencies_parsed_at":"2023-11-13T18:25:39.893Z","dependency_job_id":"0aeaf58a-a504-4656-8525-40242b3b81aa","html_url":"https://github.com/apivideo/api.video-reactnative-player","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apivideo%2Fapi.video-reactnative-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apivideo%2Fapi.video-reactnative-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apivideo%2Fapi.video-reactnative-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apivideo%2Fapi.video-reactnative-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apivideo","download_url":"https://codeload.github.com/apivideo/api.video-reactnative-player/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247949725,"owners_count":21023375,"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":["player","react-native","video","video-player"],"created_at":"2024-11-06T13:37:19.860Z","updated_at":"2025-04-09T00:30:51.397Z","avatar_url":"https://github.com/apivideo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\u003cdocumentation_excluded\u003e--\u003e\n[![badge](https://img.shields.io/twitter/follow/api_video?style=social)](https://twitter.com/intent/follow?screen_name=api_video) \u0026nbsp; [![badge](https://img.shields.io/github/stars/apivideo/api.video-reactnative-player?style=social)](https://github.com/apivideo/api.video-reactnative-player) \u0026nbsp; [![badge](https://img.shields.io/discourse/topics?server=https%3A%2F%2Fcommunity.api.video)](https://community.api.video)\n![](https://github.com/apivideo/.github/blob/main/assets/apivideo_banner.png)\n![npm](https://img.shields.io/npm/v/@api.video/react-native-player) ![ts](https://badgen.net/badge/-/TypeScript/blue?icon=typescript\u0026label)\n\u003ch1 align=\"center\"\u003eapi.video React Native video player\u003c/h1\u003e\n\n[api.video](https://api.video) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand \u0026 low latency live streaming features in your app.\n\n## Table of contents\n\n- [Table of contents](#table-of-contents)\n- [Project description](#project-description)\n- [Getting started](#getting-started)\n  - [Installation](#installation)\n  - [Limitations](#limitations)\n  - [Code sample](#code-sample)\n- [Documentation](#documentation)\n  - [Props \u0026 Methods](#props--methods)\n  - [Using methods](#using-methods)\n- [FAQ](#faq)\n\n\u003c!--\u003c/documentation_excluded\u003e--\u003e\n\u003c!--\u003cdocumentation_only\u003e\n---\ntitle: api.video React Native Player\nmeta: \n  description: The official api.video React Native Player for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand \u0026 low latency live streaming features in your app.\n---\n\n# api.video React Native Player\n\n[api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand \u0026 low latency live streaming features in your app.\n\n\u003c/documentation_only\u003e--\u003e\n## Project description\n\nReact Native video player to play vod and lives from api.video \n\n## Getting started\n\n### Installation\n\n```sh\nnpm install @api.video/react-native-player\n```\nor\n```sh\nyarn add @api.video/react-native-player\n```\n_Note: if you are on iOS, you will need this extra step:_\nInstall the native dependencies with Cocoapods\n```sh\ncd ios \u0026\u0026 pod install\n```\n\n### Limitations\n\nFor the moment, this player component is based on the api.video's javascript player (displayed in a [react-native-webview](https://github.com/react-native-webview/react-native-webview)), and therefore it suffers from the same limitation as every players displayed in browsers. \n\nWe plan to base the player component on natives video players in a further release to avoid this kind of limitation. Stay tuned!\n\n### Code sample\n\n```jsx\nimport React from 'react';\nimport ApiVideoPlayer from '@api.video/react-native-player';\n\nconst App = () =\u003e \n    \u003cApiVideoPlayer videoId=\"vi2G6Qr8ZVE67dWLNymk7qbc\" /\u003e\n  \nexport default App;\n```\n\n## Documentation\n\n### Props \u0026 Methods\n\n```ts\n// props:\ntype PlayerProps = {\n    // the id of the video (required)\n    videoId: string;\n    // if the video is private, the private token of the video\n    privateToken?: string;\n    // if the video is private, the session token for the video (avh)\n    sessionToken?: string;\n    // whether the video is vod or live (default is 'vod')\n    type?: 'vod' | 'live';\n    // the controls are hidden (default false)\n    hideControls?: boolean;\n    // the video title is hidden (default false)\n    hideTitle?: boolean;\n    // start playing the video as soon as it is loaded (default false)\n    autoplay?: boolean;\n    // once the video is finished it automatically starts again (default false)\n    loop?: boolean;\n    // the video is muted (default false)\n    muted?: boolean;\n    // style to apply to the player component\n    style?: StyleProp\u003cViewStyle\u003e;\n\n    onControlsDisabled?: () =\u003e void;\n    onControlsEnabled?: () =\u003e void;\n    onEnded?: () =\u003e void;\n    onError?: () =\u003e void;\n    onFirstPlay?: () =\u003e void;\n    onFullScreenChange?: (isFullScreen: boolean) =\u003e void;\n    onPause?: () =\u003e void;\n    onPlay?: () =\u003e void;\n    onPlayerResize?: () =\u003e void;\n    onQualityChange?: (resolution: { height: number, width: number }) =\u003e void;\n    onRateChange?: () =\u003e void;\n    onReady?: () =\u003e void;\n    onResize?: () =\u003e void;\n    onSeeking?: () =\u003e void;\n    onTimeUpdate?: ( currentTime: number ) =\u003e void;\t\n    onUserActive?: () =\u003e void;\n    onUserInactive?: () =\u003e void;\n    onVolumeChange?: ( volume: number ) =\u003e void;\n}\n\n// methods:\nplay(): void;\npause(): void;\nrequestFullscreen(): void;\nseek(time: number): void;\nsetCurrentTime(time: number): void;\nsetPlaybackRate(rate: number): void;\nsetVolume(volume: number): void;\n```\n\n### Using methods\n```jsx\nimport React, { Component } from 'react';\nimport ApiVideoPlayer from '@api.video/react-native-player';\nimport { Button, View } from 'react-native';\n\nexport default class App extends Component {\n\n  render() {\n    return (\n      \u003cView style={{ flex: 1 }}\u003e\n        \u003cApiVideoPlayer\n          ref={(r) =\u003e (this.player = r)}\n          muted={true}\n          videoId=\"vi2G6Qr8ZVE67dWLNymk7qbc\" /\u003e\n\n        \u003cButton onPress={() =\u003e this.player.play()} title=\"Play\" /\u003e\n        \u003cButton onPress={() =\u003e this.player.pause()} title=\"Pause\" /\u003e\n\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n\n## FAQ\nIf you have any questions, ask us here:  https://community.api.video .\nOr use [Issues].\n\n\n[//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax)\n\n   [Issues]: \u003chttps://github.com/apivideo/api.video-reactnative-player/issues\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapivideo%2Fapi.video-reactnative-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapivideo%2Fapi.video-reactnative-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapivideo%2Fapi.video-reactnative-player/lists"}