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:
Download Details:
Author: premieroctet
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/premieroctet/react-native-video-controls
License: MIT