Video component for Expo built on default Video component. Inspired by expo/videoplayer (already deprecated)
The library has a lot of options, but most of them are optional (source
and inFullscreen
are required). See the props table below. The Video
component also supports phones, which screen ratio is not 16:9.
For compatibility informations check Compatibility
yarn add expo-video-player
or npm install expo-video-player
If you are using TypeScript, type definitions are in the project itself.
Example app can be found in the folder example-app.
import { Video } from 'expo-av'
import VideoPlayer from 'expo-video-player'
<VideoPlayer
videoProps={{
shouldPlay: true,
resizeMode: Video.RESIZE_MODE_CONTAIN,
source: {
uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
},
}}
inFullscreen={true}
/>
prop | type | default | required | description |
---|---|---|---|---|
debug | boolean |
false |
❌ | Write internal logs to console |
VIDEO PROPS | ||||
videoProps | VideoProps |
{} |
✔️ | Video props to Expo component (at least source is required) |
inFullscreen | boolean |
✔️ | Specify if video is inFullscreen (show enter/leave fullscreen icons) | |
width | number |
Dimensions.get('window').width |
❌ | Specify width of the video (automatically set height based on screen ratio) |
height | number |
Dimensions.get('window').height |
❌ | Specify height (automatically set width based on screen ratio) |
ANIMATIONS | ||||
fadeInDuration | number |
200 |
❌ | How long should the fadeIn animation for the controls run? (in milliseconds) |
fadeOutDuration | number |
1000 |
❌ | How long should the fadeOut animation run? (in milliseconds) |
hideControlsTimerDuration | number |
4000 |
❌ | If the user has not interacted with the controls, how long should the controls stay visible? (in milliseconds) Default value is 4000. |
quickFadeOutDuration | number |
200 |
❌ | How long should the fadeOut animation run when the screen is tapped when the controls are visible? |
ICONS | ||||
fullscreenEnterIcon | JSX.Element |
FullscreenEnterIcon |
❌ | Default icon for entering fullscreen video |
fullscreenExitIcon | JSX.Element |
FullscreenExitIcon |
❌ | Default icon for exiting fullscreen video |
playIcon | JSX.Element |
PlayIcon |
❌ | Default icon for playing the video |
pauseIcon | JSX.Element |
PauseIcon |
❌ | Default icon for pausing the video |
replayIcon | JSX.Element |
ReplayIcon |
❌ | Default icon for replaying the video |
spinner | JSX.Element |
ReplayIcon |
❌ | Default icon for pausing the video |
showFullscreenButton | boolean |
true |
❌ | Boolean indicating whether fullscreen icon should be visible |
APPEARANCE | ||||
iosThumbImage | source |
image |
❌ | iOS thumbImage |
iosTrackImage | source |
image |
❌ | iOS trackImage |
showControlsOnLoad | boolean |
false |
❌ | Boolean indicating whether controls should be visible on load |
sliderColor | color |
#009485 |
❌ | Color for ANDROID thumbTintColor and iOS minimumTrackImage |
textStyle | TextStyle |
{color: '#FFF', fontSize: 12} |
❌ | Default styling for text (eg. errors) |
videoBackground | color |
#000 |
❌ | Default background around video |
CALLBACKS | ||||
errorCallback | function |
error => console.error('Error: ', error.message, error.type, error.obj) |
❌ | Function when an error occurs |
playbackCallback | function |
callback => {} |
❌ | Function when playing changes (buffering/seeking/...) |
switchToPortrait | function |
() => console.warn('Pass in this function 'switchToPortrait' in props to enable fullscreening') |
❌ | Pass your function to make something on click (eg. rotate phone) |
switchToLandscape | function |
() => console.warn('Pass in this function 'switchToLandscape' in props to enable fullscreening') |
❌ | Pass your function to make something on click (eg. rotate phone) |
Library version | Expo SDK version |
---|---|
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
- make better example app
- make tests