@onytgvx/expo-video-player

Customizable Video Player controls for Expo

Usage no npm install needed!

<script type="module">
  import onytgvxExpoVideoPlayer from 'https://cdn.skypack.dev/@onytgvx/expo-video-player';
</script>

README

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)

CHANGELOG

Changelog added in version 1.3.0 Read CHANGELOG.md

TODO

  • make better example app
  • make tests

Some articles