Basic info

Video component for Expo built on default Video component. Inspired by expo/videoplayer

The library has a lot of options, but a lot of them are optional (source is 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 example folder.

import { Video } from 'expo'
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',
    },
  }}
  isPortrait={true}
  playFromPositionMillis={0}
/>

Props

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)
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)
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/...)
switchToLandscape	function	error => console.error('Error: ', error.message, error.type, error.obj)	❌	Function when an error occurs
switchToPortrait	function	() => console.warn('Pass in this function 'switchToLandscape' 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)

TODO

• make better example app
• make auto-generating docs from TypeScript
• make tests

Some articles

• Creating a typescript module
• Creating a component for React
• Problem with default props