Customizable Video Player controls for Expo
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
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)Minimal code to make VideoPlayer working
``
import { ResizeMode } from 'expo-av'
import VideoPlayer from 'expo-video-player'
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',
},
}}
/>
`
| Property | Type | Description |
| ---- | :-------: | ----------- |
| videoProps | VideoProps | At least source is required |onPlaybackStatusUpdate
| errorCallback | (error: ErrorType) => void | Function which is fired when an error occurs |
| playbackCallback | (status: AVPlaybackStatus) => void | Function which is fired every time occurs |boolean
| defaultControlsVisible | | Show controls on darker overlay when video starts playing. Default is false |boolean
| timeVisible | | Show current time and final length in the bottom. Default is true |TextStyle
| textStyle | | Object containing styling |{ visible?: boolean } & SliderProps
| slider | | 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 |ActivityIndicatorProps
| activityIndicator | | Any values from ActivityIndicator |{ fadeInDuration?: number, fadeOutDuration?: number }
| animation | | Duration of animations in milliseconds |{ width?: number, height?: number, videoBackgroundColor?: ColorValue, controlsBackgroundColor?: ColorValue }
| style | | Basic styling of |{ 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 | | Icon styling. Check more in the example-app |{ enterFullscreen?: () => void, exitFullscreen?: () => void, inFullscreen?: boolean, visible?: boolean }
| fullscreen | | Usage of Fullscreen mode is in the example-app |boolean
| autoHidePlayer | | 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 |ReactNode
| header | | Render header component same as in YouTube app. Default undefined |{ enterMute?: () => void, exitMute?: () => void, isMute?: boolean, visible?: boolean }
| mute | | Usage of mute` mode is in the example-app |
#### Some articles
- Inspired by expo/videoplayer _(already deprecated)_
- Typescript default props
- Creating a typescript module
- Creating a component for React