{"id":18488516,"url":"https://github.com/ihmpavel/expo-video-player","last_synced_at":"2025-04-08T21:30:36.693Z","repository":{"id":33821703,"uuid":"162642281","full_name":"ihmpavel/expo-video-player","owner":"ihmpavel","description":"Customizable Video Player controls for Expo","archived":false,"fork":false,"pushed_at":"2024-04-19T14:49:46.000Z","size":5647,"stargazers_count":208,"open_issues_count":38,"forks_count":110,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-03T02:48:16.494Z","etag":null,"topics":["expo","expo-video-player","player","react-native","typescript","video","videoplayer"],"latest_commit_sha":null,"homepage":"https://npm.im/expo-video-player","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/ihmpavel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"ihmpavel"}},"created_at":"2018-12-20T23:36:22.000Z","updated_at":"2025-02-26T20:12:51.000Z","dependencies_parsed_at":"2024-06-18T13:54:32.453Z","dependency_job_id":"574a1f84-2a11-43df-81b1-f1567385706b","html_url":"https://github.com/ihmpavel/expo-video-player","commit_stats":{"total_commits":105,"total_committers":9,"mean_commits":"11.666666666666666","dds":0.2857142857142857,"last_synced_commit":"d9a71db1e9c7826da16ae4cc0f17685a74217905"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ihmpavel%2Fexpo-video-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ihmpavel%2Fexpo-video-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ihmpavel%2Fexpo-video-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ihmpavel%2Fexpo-video-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ihmpavel","download_url":"https://codeload.github.com/ihmpavel/expo-video-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305914,"owners_count":20917204,"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":["expo","expo-video-player","player","react-native","typescript","video","videoplayer"],"created_at":"2024-11-06T12:51:50.862Z","updated_at":"2025-04-08T21:30:36.687Z","avatar_url":"https://github.com/ihmpavel.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ihmpavel"],"categories":["Stale","TypeScript"],"sub_categories":["React Native \u0026 Expo"],"readme":"# Basic info\nVideo wrappper component for Expo ecosystem built on top of the Expo's [Video component](https://docs.expo.io/versions/latest/sdk/video/). This library basically adds UI controls like in the YouTube app, which gives you the opportunity to play, pause, replay, change video position and a lot of styling options.\n\nThe package has a lot of configuration options to fit all your needs. Only `source` in `videoProps: { source: {} }` is required. Check the \u003ca href='#props'\u003eProps\u003c/a\u003e table below.\n\nFor compatibility information, scroll down to \u003ca href='#compatibility'\u003eCompatibility\u003c/a\u003e. The FAQ is \u003ca href='#faq'\u003ehere\u003c/a\u003e\n\n## ⚠️ Updating from version 1.x to 2.x\nIf you are updating from version 1.x to 2.x, there are some breaking changes in the API. Please visit [Migration guide to version 2](https://github.com/ihmpavel/expo-video-player/blob/master/migration-1x-to-2x.md) to make your transition as easy as possible. In version 2.x [@react-native-community/netinfo](https://github.com/react-native-netinfo/react-native-netinfo) has been removed.\n\n## Installation\n- Install Video Player component typing into terminal `yarn add expo-video-player` _or_ `npm install expo-video-player`\n- You also need `expo-av` and `@react-native-community/slider`. Install them with `expo-cli` (`expo install expo-av @react-native-community/slider`)\n\n## Usage\nThe showcase of some of the possibilities you can create is in the folder [example-app](https://github.com/ihmpavel/expo-video-player/blob/master/example-app). There is Fullscreen, ref, local file, custom icons, styling...\n\nMinimal code to make `VideoPlayer` working\n```\nimport { ResizeMode } from 'expo-av'\nimport VideoPlayer from 'expo-video-player'\n\n\u003cVideoPlayer\n  videoProps={{\n    shouldPlay: true,\n    resizeMode: ResizeMode.CONTAIN,\n    // ❗ source is required https://docs.expo.io/versions/latest/sdk/video/#props\n    source: {\n      uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',\n    },\n  }}\n/\u003e\n```\n\n## Props\nFor default prop values, please visit [/lib/props.tsx](https://github.com/ihmpavel/expo-video-player/blob/master/lib/props.tsx#L11)\n\n| Property | Type | Description |\n| ---- | :-------: | ----------- |\n| **videoProps** | [`VideoProps`](https://docs.expo.io/versions/latest/sdk/video/#props) | At least `source` is required |\n| **errorCallback** | (error: ErrorType) =\u003e void | Function which is fired when an error occurs |\n| **playbackCallback** | (status: AVPlaybackStatus) =\u003e void | Function which is fired every time `onPlaybackStatusUpdate` occurs |\n| **defaultControlsVisible** | `boolean` | Show controls on darker overlay when video starts playing. Default is `false` |\n| **timeVisible** | `boolean` | Show current time and final length in the bottom. Default is `true` |\n| **textStyle** | `TextStyle` | Object containing `\u003cText /\u003e` styling |\n| **slider** | `{ visible?: boolean } \u0026 SliderProps` | Object containing any of [@react-native-community/slider](https://github.com/callstack/react-native-slider) props. Your styling may break default layout. Also hide slider by providing `visible: false` prop. You are unable to overwrite `ref`, `value`, `onSlidingStart` and `onSlidingComplete` |\n| **activityIndicator** | `ActivityIndicatorProps` | Any values from [ActivityIndicator](https://reactnative.dev/docs/activityindicator) |\n| **animation** | `{ fadeInDuration?: number, fadeOutDuration?: number }` | Duration of animations in milliseconds |\n| **style** | `{ width?: number, height?: number, videoBackgroundColor?: ColorValue, controlsBackgroundColor?: ColorValue }` | Basic styling of `\u003cVideoPlayer /\u003e` |\n| **icon** | `{ size?: number, color?: ColorValue, style?: TextStyle, pause?: JSX.Element, play?: JSX.Element, replay?: JSX.Element, fullscreen?: JSX.Element, exitFullscreen?: JSX.Element, mute?: JSX.Element, exitMute?: JSX.Element }` | Icon styling. Check more in the [example-app](https://github.com/ihmpavel/expo-video-player/blob/master/example-app/App.tsx) |\n| **fullscreen** | `{ enterFullscreen?: () =\u003e void, exitFullscreen?: () =\u003e void, inFullscreen?: boolean, visible?: boolean }` | Usage of `Fullscreen` mode is in the [example-app](https://github.com/ihmpavel/expo-video-player/blob/master/example-app/App.tsx#L182) |\n| **autoHidePlayer** | `boolean` | Prevent player from hiding after certain time, by setting it to `false` you need to tap the screen again to hide the player. Default is `true` |\n| **header** | `ReactNode` | Render header component same as in YouTube app. Default `undefined` |\n| **mute** | `{ enterMute?: () =\u003e void, exitMute?: () =\u003e void, isMute?: boolean, visible?: boolean }` | Usage of `mute` mode is in the [example-app](example-app/App.tsx) |\n\n## Compatibility\nLibrary version | Expo SDK version\n---- | -------\n2.1.x | \u003e= SDK 45\n2.x.x | \u003e= SDK 38\n1.6.x | \u003e= SDK 38\n1.5.x | \u003e= SDK 34\n1.4.x | \u003e= SDK 34\n1.3.x | \u003e= SDK 34\n1.2.x | \u003e= SDK 33\n1.1.x | \u003e= SDK 32\n1.x.x | \u003e= SDK 32\n\n### CHANGELOG\nChangelog added in version 1.3.0\nRead [CHANGELOG.md](https://github.com/ihmpavel/expo-video-player/blob/master/CHANGELOG.md)\n\n### FAQ\n- **How to make fullscreen working?** Please visit [example-app](https://github.com/ihmpavel/expo-video-player/blob/master/example-app/App.tsx#L182)\n- **How to use ref?** Please visit [example-app](https://github.com/ihmpavel/expo-video-player/blob/master/example-app/App.tsx)\n- **What to do if I disconnect from the internet while playing video from remote source?** You need to stop/pause playback yourself. I highly recommend using [@react-native-community/netinfo](https://github.com/react-native-netinfo/react-native-netinfo) for this kind of stuff\n- **Do you support subtitles?** Have a look at [#1](https://github.com/ihmpavel/expo-video-player/issues/1)\n- **Can I support you?** Yes, please [Become a sponsor](https://github.com/sponsors/ihmpavel)\n\n### TODO\n- [ ] make tests\n\n#### Some articles\n - Inspired by [expo/videoplayer](https://github.com/expo/videoplayer) _(already deprecated)_\n - [Typescript default props](https://github.com/typescript-cheatsheets/react/issues/415)\n - [Creating a typescript module](https://codeburst.io/https-chidume-nnamdi-com-npm-module-in-typescript-12b3b22f0724)\n - [Creating a component for React](https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce)\n\n\n## More packages from me\n- [all-iso-language-codes](https://github.com/ihmpavel/all-iso-language-codes) - List of ISO 639-1, 639-2T, 639-2B and 639-3 codes with translations in all available languages\n- [expo-video-player](https://github.com/ihmpavel/expo-video-player) - Customizable Video Player controls for Expo\n- [free-email-domains-list](https://github.com/ihmpavel/free-email-domains-list) - Fresh list of all free email domain providers. Can be used to check if an email address belongs to a company. Updated weekly\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fihmpavel%2Fexpo-video-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fihmpavel%2Fexpo-video-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fihmpavel%2Fexpo-video-player/lists"}