Description:
Controls elements and utilities for React Native video players.
Components Included:
- VideoControls
- ControlSlider
- ControlThumb
- ControlVideoState
- ControlFullScreen
- ControlTouchable
Hooks Included:
- useControlSlider
- useControlsVideoState
- useControlFullScreen
- useControlThumb
- useLayout
- useTapGesture / useLongPressGesture
- useTimeFromThumb
- useControlsVisibility
- usePinchGesture
Installation:
# Yarn $ yarn add @premieroctet/react-native-video-controls # NPM $ npm i @premieroctet/react-native-video-controls
Basic usage:
<VideoControls
componentsProps={componentProps}
components={components}
onFastForward={onFastForward}
onFastRewind={onFastRewind}
videoElement={
<Video
source={{
uri: '/path/to/video.mp4',
}}
useNativeControls={false}
onLoad={onLoad}
onPlaybackStatusUpdate={onPlaybackStatusUpdate}
shouldPlay
rotation={isFullScreen ? 90 : 0}
style={[
{ width: '100%' },
isFullScreen
? {
height: '100%',
}
: { aspectRatio: 16 / 9 },
]}
ref={videoRef}
pointerEvents="none"
/>
}
/>Preview:
