Video wrappper component for Expo ecosystem built on top of the Expo's Video component. 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.
The package has a lot of configuration options to fit all your needs. Only source in videoProps: { source: {} } is required. Check the Props table below.
For compatibility information, scroll down to Compatibility. The FAQ is here
If 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 to make your transition as easy as possible. In version 2.x @react-native-community/netinfo has been removed.
yarn add expo-video-player or npm install expo-video-playerexpo-av and @react-native-community/slider. Install them with expo-cli (expo install expo-av @react-native-community/slider)The showcase of some of the possibilities you can create is in the folder example-app. There is Fullscreen, ref, local file, custom icons, styling...
Minimal code to make VideoPlayer working
import { ResizeMode } from 'expo-av'
import VideoPlayer from 'expo-video-player'
<VideoPlayer
videoProps={{
shouldPlay: true,
resizeMode: ResizeMode.CONTAIN,
// ❗ source is required https://docs.expo.io/versions/latest/sdk/video/#props
source: {
uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
},
}}
/>For default prop values, please visit /lib/props.tsx
| Property | Type | Description |
|---|---|---|
| videoProps | VideoProps |
At least source is required |
| errorCallback | (error: ErrorType) => void | Function which is fired when an error occurs |
| playbackCallback | (status: AVPlaybackStatus) => void | Function which is fired every time onPlaybackStatusUpdate occurs |
| defaultControlsVisible | boolean |
Show controls on darker overlay when video starts playing. Default is false |
| timeVisible | boolean |
Show current time and final length in the bottom. Default is true |
| textStyle | TextStyle |
Object containing <Text /> styling |
| slider | { visible?: boolean } & SliderProps |
Object containing any of @react-native-community/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 |
| activityIndicator | ActivityIndicatorProps |
Any values from ActivityIndicator |
| animation | { fadeInDuration?: number, fadeOutDuration?: number } |
Duration of animations in milliseconds |
| style | { width?: number, height?: number, videoBackgroundColor?: ColorValue, controlsBackgroundColor?: ColorValue } |
Basic styling of <VideoPlayer /> |
| 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 |
| fullscreen | { enterFullscreen?: () => void, exitFullscreen?: () => void, inFullscreen?: boolean, visible?: boolean } |
Usage of Fullscreen mode is in the example-app |
| 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 |
| header | ReactNode |
Render header component same as in YouTube app. Default undefined |
| mute | { enterMute?: () => void, exitMute?: () => void, isMute?: boolean, visible?: boolean } |
Usage of mute mode is in the example-app |
| Library version | Expo SDK version |
|---|---|
| 2.1.x | >= SDK 45 |
| 2.x.x | >= SDK 38 |
| 1.6.x | >= SDK 38 |
| 1.5.x | >= SDK 34 |
| 1.4.x | >= SDK 34 |
| 1.3.x | >= SDK 34 |
| 1.2.x | >= SDK 33 |
| 1.1.x | >= SDK 32 |
| 1.x.x | >= SDK 32 |
Changelog added in version 1.3.0 Read CHANGELOG.md