/expo-video-player

Customizable Video Player controls for Expo

Primary LanguageTypeScript

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