da314pc / expo-video-player

Customizable Video Player controls for Expo

Basic info

Video component for Expo built on default Video component.

The package has lot of configuration options to fit your needs. Only source and inFullscreen are required. See the props table below. The Video component also supports phones, which screen ratio is not standard.

For compatibility information check Compatibility

Installation

• Expo video player yarn add expo-video-player or npm install expo-video-player
• Dependencies You may also need expo-av and @react-native-community/netinfo. Install them with expo-cli (expo install expo-av @react-native-community/netinfo)

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	❌	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 your logic to switchToPortrait prop')	❌	Pass your function to make something on click (eg. rotate phone)
switchToLandscape	function	() => console.warn('Pass your logic to switchToLandscape prop')	❌	Pass your function to make something on click (eg. rotate phone)

Compatibility

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

Changelog added in version 1.3.0 Read CHANGELOG.md

TODO

• make better example app
• make tests

Some articles

• Inspired by expo/videoplayer (already deprecated)
• Creating a typescript module
• Creating a component for React