Basic info

Video wrappper component for Expo ecosystem built on top of the Expo's Video component. This library basically adds UI controls like in the YouTube app, which gives you the opportunity to play, pause, replay, change video position and a lot of styling options.

The package has a lot of configuration options to fit all your needs. Only source in videoProps: { source: {} } is required. Check the Props table below.

For compatibility information, scroll down to Compatibility. The FAQ is here

⚠️ Updating from version 1.x to 2.x

If you are updating from version 1.x to 2.x, there are some breaking changes in the API. Please visit Migration guide to version 2 to make your transition as easy as possible. In version 2.x @react-native-community/netinfo has been removed.

Installation

• Install Video Player component typing into terminal yarn add expo-video-player or npm install expo-video-player
• You also need expo-av and @react-native-community/slider. Install them with expo-cli (expo install expo-av @react-native-community/slider)

Usage

The showcase of some of the possibilities you can create is in the folder example-app. There is Fullscreen, ref, local file, custom icons, styling...

Minimal code to make VideoPlayer working

import { Video } from 'expo-av'
import VideoPlayer from 'expo-video-player'

<VideoPlayer
  videoProps={{
    shouldPlay: true,
    resizeMode: Video.RESIZE_MODE_CONTAIN,
    // ❗ source is required https://docs.expo.io/versions/latest/sdk/video/#props
    source: {
      uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    },
  }}
/>

Props

For default prop values, please visit /lib/props.tsx Property | Type | Description ---- | :-------: | ----------- videoProps | VideoProps | At least source is required errorCallback | (error: ErrorType) => void | Function which is fired when an error occurs playbackCallback | (status: AVPlaybackStatus) => void | Function which is fired every time onPlaybackStatusUpdate occurs defaultControlsVisible | boolean | Show controls on darker overlay when video starts playing. Default is false timeVisible | boolean | Show current time and final length in the bottom. Default is true textStyle | TextStyle | Object containing <Text /> styling slider | { visible?: boolean } & SliderProps | Object containing any of @react-native-community/slider props. Your styling may break default layout. Also hide slider by providing visible: false prop. You are unable to overwrite ref, value, onSlidingStart and onSlidingComplete activityIndicator | ActivityIndicatorProps | Any values from ActivityIndicator animation | { fadeInDuration?: number, fadeOutDuration?: number } | Duration of animations in milliseconds style | { width?: number, height?: number, videoBackgroundColor?: ColorValue, controlsBackgroundColor?: ColorValue } | Basic styling of <VideoPlayer /> icon | { size?: number, color?: ColorValue, style?: TextStyle, pause?: JSX.Element, play?: JSX.Element, replay?: JSX.Element, fullscreen?: JSX.Element, exitFullscreen?: JSX.Element } | Icon styling. Check more in the example-app fullscreen | { enterFullscreen?: () => void, exitFullscreen?: () => void, inFullscreen?: boolean, visible?: boolean } | Usage of Fullscreen mode is in the example-app

Compatibility

Library version | Expo SDK version ---- | ------- 2.x.x | >= SDK 38 1.6.x | >= SDK 38 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

FAQ

• How to make fullscreen working? Please visit example-app
• How to use ref? Please visit example-app
• What to do if I disconnect from the internet while playing video from remote source? You need to stop/pause playback yourself. I highly recommend using @react-native-community/netinfo for this kind of stuff
• Do you support subtitles? Have a look at #1
• Can I support you? Yes, please Become a sponsor

TODO

• [ ] make tests

Some articles

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