@onytgvx/expo-video-player NPM

Basic info

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.

Installation

yarn add expo-video-player or npm install expo-video-player

If you are using TypeScript, type definitions are in the project itself.

Usage

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}
/>

Props

prop	type	default	required	description
debug	`boolean`	`false`	:x:	Write internal logs to console
VIDEO PROPS
videoProps	`VideoProps`	`{}`	:heavy_check_mark:	Video props to Expo component (at least source is required)
inFullscreen	`boolean`		:heavy_check_mark:	Specify if video is inFullscreen (show enter/leave fullscreen icons)
isPortrait (@deprecated - will be removed in next major version)	`boolean`		:heavy_check_mark:	Specify orientation of the video
width	`number`	`Dimensions.get('window').width`	:x:	Specify width of the video (automatically set height based on screen ratio)
height	`number`	`Dimensions.get('window').height`	:x:	Specify height (automatically set width based on screen ratio)
ANIMATIONS
fadeInDuration	`number`	`200`	:x:	How long should the fadeIn animation for the controls run? (in milliseconds)
fadeOutDuration	`number`	`1000`	:x:	How long should the fadeOut animation run? (in milliseconds)
hideControlsTimerDuration	`number`	`4000`	:x:	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`	:x:	How long should the fadeOut animation run when the screen is tapped when the controls are visible?
ICONS
fullscreenEnterIcon	`JSX.Element`	`FullscreenEnterIcon`	:x:	Default icon for entering fullscreen video
fullscreenExitIcon	`JSX.Element`	`FullscreenExitIcon`	:x:	Default icon for exiting fullscreen video
playIcon	`JSX.Element`	`PlayIcon`	:x:	Default icon for playing the video
pauseIcon	`JSX.Element`	`PauseIcon`	:x:	Default icon for pausing the video
replayIcon	`JSX.Element`	`ReplayIcon`	:x:	Default icon for replaying the video
spinner	`JSX.Element`	`ReplayIcon`	:x:	Default icon for pausing the video
showFullscreenButton	`boolean`	`true`	:x:	Boolean indicating whether fullscreen icon should be visible
APPEARANCE
iosThumbImage	`source`	`image`	:x:	iOS thumbImage
iosTrackImage	`source`	`image`	:x:	iOS trackImage
showControlsOnLoad	`boolean`	`false`	:x:	Boolean indicating whether controls should be visible on load
sliderColor	`color`	`#009485`	:x:	Color for ANDROID thumbTintColor and iOS minimumTrackImage
textStyle	`TextStyle`	`{color: '#FFF', fontSize: 12}`	:x:	Default styling for text (eg. errors)
videoBackground	`color`	`#000`	:x:	Default background around video
CALLBACKS
errorCallback	`function`	`error => console.error('Error: ', error.message, error.type, error.obj)`	:x:	Function when an error occurs
playbackCallback	`function`	`callback => {}`	:x:	Function when playing changes (buffering/seeking/...)
switchToPortrait	`function`	`() => console.warn('Pass in this function 'switchToPortrait' in props to enable fullscreening')`	:x:	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')`	:x:	Pass your function to make something on click (eg. rotate phone)