Video *

This component provides video playback capabilities with optional controls for play, pause, etc.

Installation

This component is not included by default, to use it import the following package:

NPM
Yarn
NPM
$ npm i react-ult-ext-video
Yarn
$ yarn add react-ult-ext-video

Styles

  • Flexbox Styles

  • View Styles

  • Transform Styles

Props

Name

Type

Description

accessibilityLabel

string

  • Alternate text to display if the image cannot be loaded or by screen readers

authToken

string

  • Authentication token to include in request (not supported on some React Native implementations)

loop

boolean

  • Should video playback loop to beginning after it completes?

onBuffer

() => void

  • Called when the video is paused for buffering

onCanPlay

() => void

  • Called when enough of the video has been loaded that playback is possible

onCanPlayThrough

() => void

  • Called when enough of the video has been loaded that playback can proceed all the way to the end without buffering pauses

onEnded

() => void

  • Called when the video playback reaches the end

onError

() => void

  • Called when the video cannot be loaded

onLoadedData

(info: VideoInfo) => void

  • Called when the video's metadata has been loaded; returns information about the video

onLoadStart

() => void

  • Called when the video data is starting to load

onProgress

(progress: VideoProgress) => void

  • Called periodically when the video is playing; reports progress information

preload

'auto'|'metadata'|'none'

  • Indiciates which portion of the video should be pre-loaded when the component is mounted

resizeMode

'contain'|'cover'|'stretch'

  • Determines how to resize the image if its natural size does not match the size of the container

showControls

boolean

  • Displays controls for play, pause, etc.

source

string | number

  • Source of video (URL) or resource id as resolved by require() for react-native targets

style

ViewStyleRuleSet | ViewStyleRuleSet[]

  • See above for supported styles