Socket
Socket
Sign inDemoInstall

react-native-video-controls

Package Overview
Dependencies
521
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-video-controls

A set of GUI controls for the react-native-video component


Version published
Maintainers
1
Weekly downloads
15,930
increased by8.2%

Weekly downloads

Readme

Source

react-native-video-controls

ci

Controls for the React Native <Video> component at react-native-video. For support with RN 0.45 or lower use version 1.3.1 or lower.

Features

This package contains a simple set of GUI controls that work with the react-native-video <Video> component. This includes a back button, volume bar, fullscreen toggle, play/pause toggle, seekbar, title, error handling and timer toggle that can switch between time remaining and current time when tapped.

How it looks

By default the <VideoPlayer> accepts a navigator property from React's built-in <Navigator> which pops the current scene off the stack when tapped. Alternatively you can provide your own onBack prop to the component to override this functionality. You should also provide your own onEnd prop to the component so it knows what to do when a video ends playback.

By default, tapping the screen anywhere will show the player controls. After 10s the controls disappear. Double tapping will toggle fullscreen.

Installation

Run npm install --save react-native-video react-native-video-controls

Then run react-native link react-native-video

If you're using RN < 39 run npm install --save react-native-video-controls@1.0.1. Note this version includes react-native-video as a normal dependency instead of a peer-dependency.

Usage

The <VideoPlayer> component follows the API of the <Video> component at react-native-video. It also takes a number of additional props which are outlined in the API section.

For basic operation the <VideoPlayer> component requires a video source and a navigator property. The default back button functionality in the component relies on using the built-in <Navigator> functionality in React Native and pops the current scene off the stack. This can be overridden if desired, see the API for more details.

// At the top where our imports are...
import VideoPlayer from 'react-native-video-controls';

// in the component's render() function
<VideoPlayer
  source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
  navigator={this.props.navigator}
/>;

To play a local file, use require syntax like so:

<VideoPlayer source={require('path/to/file')} />

API

The <VideoPlayer> component can take a number of inputs to customize it as needed. They are outlined below:

Props

You can pass any of the props that the <Video /> component at react-native-video takes. Simply add them onto the <VideoPlayer /> and it will pass them through to the <Video /> component.

In addition, the <VideoPlayer /> also takes these props:

PropTypeDefaultDescription
toggleResizeModeOnFullscreenBooleantrueIf true, clicking the fullscreen button will toggle the <Video /> component between cover/contain, set to false if you want to customize fullscreen behaviour
controlAnimationTimingInteger500The amountof time (in milliseconds) to animate the controls in and out.
doubleTapTimeInteger130Tapping twice within this amount of time in milliseconds is considered a double tap. Single taps will not be actioned until this time has expired.
controlTimeoutInteger15000Hide controls after X amount of time in milliseconds
scrubbingInteger0If > 0, enable live scrubbing when moving the seek bar. The provided value is the minimum time step of the scrubbing in milliseconds.
showOnStartBooleantrueShow or hide the controls on first render
videoStyleStyleSheetnullReact Native StyleSheet object that is appended to the <Video> component
navigatorNavigatornullWhen using the default React Native navigator and do not override the onBack function, you'll need to pass the navigator to the VideoPlayer for it to function
seekColorString(#HEX)'#FFF'Fill/handle colour of the seekbar
styleStyleSheetnullReact Native StyleSheet object that is appended to the video's parent <View>
tapAnywhereToPauseBooleanfalseIf true, single tapping anywhere on the video (other than a control) toggles between playing and paused.

Events

These are various events that you can hook into and fire functions on in the component:

CallbackDescription
onEnterFullscreenFired when the video enters fullscreen after the fullscreen button is pressed
onExitFullscreenFired when the video exits fullscreen after the fullscreen button is pressed
onHideControlsFired when the controls disappear
onShowControlsFired when the controls appear
onErrorFired when an error is encountered when loading the video
onPauseFired when the video is paused after the play/pause button is pressed
onPlayFired when the video begins playing after the play/pause button is pressed
onBackFunction fired when back button is pressed, override if using custom navigation
onEndFired when the video is complete

Controls

These are the various controls that you can turn on/off as needed. All of these props default to false, override them to disable any controls

ControlDescription
disableFullscreenHide the fullscreen button
disablePlayPauseHide the play/pause toggle
disableSeekbarHide the seekbar
disableVolumeHide the Volume control
disableTimerHide the timer
disableBackHide the back button

Keywords

FAQs

Last updated on 07 May 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc