Video player with controllers using React Native

This tutorial explains how to stream video and control the media in react native application. In our last tutorial we have discussed how to use video player component in react native and now we are going to use various controllers like toolbar, isLoading, isFullScreen, onFullScreen, onPaused, onReplay, onSeek, onSeeking etc in video component in react native. Here we are going to use two library which are as follows :

1. react-native-video
2. react-native-media-controls

Installation of Dependency

• react-native-video

To use video palyer in react native we need to use react-native-video in our project directory.

npm install --save react-native-video

Run below command to link react-native-video library in your project :

react-native link react-native-video

• react-native-media-controls

To use various controlling features in media player in react native we need to use react-native-media-controls  in our project directory.

npm install react-native-media-controls --save

Building Video Player With Controlling Features In React Native 

Lets see the complete source code that helps to stream video and control the media in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages import all required components.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import Video from 'react-native-video';
import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';

Step 4: Lets create constructor block inside your App component. In the constructor block we have created state variables.

videoPlayer;

  constructor(props) {
    super(props);
    this.state = {
      currentTime: 0,
      duration: 0,
      isFullScreen: false,
      isLoading: true,
      paused: false,
      playerState: PLAYER_STATES.PLAYING,
      screenType: 'contain',
    };

    console.disableYellowBox = true;
  }

Step 4: Lets create below functions that helps to control video media player streaming. 

  //Handler for change in seekbar
  onSeek = seek => {

    this.videoPlayer.seek(seek);
  };

  //Handler for Video Pause
  onPaused = playerState => {
    
    this.setState({
      paused: !this.state.paused,
      playerState,
    });
  };

  //Handler for Replay
  onReplay = () => {
    
    this.setState({ playerState: PLAYER_STATES.PLAYING });
    this.videoPlayer.seek(0);
  };

   // Video Player will continue progress even if the video already ended
  onProgress = data => {
    const { isLoading, playerState } = this.state;
   
    if (!isLoading && playerState !== PLAYER_STATES.ENDED) {
      this.setState({ currentTime: data.currentTime });
    }
  };

  onLoad = data => this.setState({ duration: data.duration, isLoading: false });

  onLoadStart = data => this.setState({ isLoading: true });

  onEnd = () => this.setState({ playerState: PLAYER_STATES.ENDED });

  onError = () => alert('Something Wrong!! ', error);

  exitFullScreen = () => {
    alert('Exit full screen');
  };

  enterFullScreen = () => { 
    alert('entered full screen');
  };

  onFullScreen = () => {
    if (this.state.screenType == 'contain')
      this.setState({ screenType: 'cover' });
    else this.setState({ screenType: 'contain' });
  };
  renderToolbar = () => (
    <View>
      <Text>Video Streaming Example </Text>
    </View>
  );
  
  onSeeking = currentTime => this.setState({ currentTime });

Step 5: Implement render method inside the App class and wrapped the below layout design inside the root View component.  

 render() {
    return (
      <View style={styles.container}>
        <Video
          style={styles.mediaPlayer}
          onEnd={this.onEnd}
          onLoad={this.onLoad}
          onLoadStart={this.onLoadStart}
          onProgress={this.onProgress}
          paused={this.state.paused}
          ref={videoPlayer => (this.videoPlayer = videoPlayer)}
          resizeMode={this.state.screenType}
          onFullScreen={this.state.isFullScreen}
          source={{ uri: 'https://www.w3schools.com/html/mov_bbb.mp4' }}
          repeat={false}
          controls={false}
          volume={10}
        />

        <MediaControls
          duration={this.state.duration}
          isLoading={this.state.isLoading}
          mainColor="#333"
          onFullScreen={this.onFullScreen}
          onPaused={this.onPaused}
          onReplay={this.onReplay}
          onSeek={this.onSeek}
          onSeeking={this.onSeeking}
          playerState={this.state.playerState}
          progress={this.state.currentTime}
          toolbar={this.renderToolbar()}
        />

      </View>
    );
  }

Step 6 : Apply the below style sheet design. 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',

  },  
  mediaPlayer: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    backgroundColor: 'black',
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to stream video and control the media in react native application.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import Video from 'react-native-video';
import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';


export default class App extends Component {

  videoPlayer;

  constructor(props) {
    super(props);
    this.state = {
      currentTime: 0,
      duration: 0,
      isFullScreen: false,
      isLoading: true,
      paused: false,
      playerState: PLAYER_STATES.PLAYING,
      screenType: 'contain',
    };

    console.disableYellowBox = true;
  }

  //Handler for change in seekbar
  onSeek = seek => {

    this.videoPlayer.seek(seek);
  };

  //Handler for Video Pause
  onPaused = playerState => {
    
    this.setState({
      paused: !this.state.paused,
      playerState,
    });
  };

  //Handler for Replay
  onReplay = () => {
    
    this.setState({ playerState: PLAYER_STATES.PLAYING });
    this.videoPlayer.seek(0);
  };

   // Video Player will continue progress even if the video already ended
  onProgress = data => {
    const { isLoading, playerState } = this.state;
   
    if (!isLoading && playerState !== PLAYER_STATES.ENDED) {
      this.setState({ currentTime: data.currentTime });
    }
  };

  onLoad = data => this.setState({ duration: data.duration, isLoading: false });

  onLoadStart = data => this.setState({ isLoading: true });

  onEnd = () => this.setState({ playerState: PLAYER_STATES.ENDED });

  onError = () => alert('Something Wrong!! ', error);

  exitFullScreen = () => {
    alert('Exit full screen');
  };

  enterFullScreen = () => { 
    alert('entered full screen');
  };

  onFullScreen = () => {
    if (this.state.screenType == 'contain')
      this.setState({ screenType: 'cover' });
    else this.setState({ screenType: 'contain' });
  };
  renderToolbar = () => (
    <View>
      <Text>Video Streaming Example </Text>
    </View>
  );

  onSeeking = currentTime => this.setState({ currentTime });

  render() {
    return (
      <View style={styles.container}>
        <Video
          style={styles.mediaPlayer}
          onEnd={this.onEnd}
          onLoad={this.onLoad}
          onLoadStart={this.onLoadStart}
          onProgress={this.onProgress}
          paused={this.state.paused}
          ref={videoPlayer => (this.videoPlayer = videoPlayer)}
          resizeMode={this.state.screenType}
          onFullScreen={this.state.isFullScreen}
          source={{ uri: 'https://www.w3schools.com/html/mov_bbb.mp4' }}
          repeat={false}
          controls={false}
          volume={10}
        />

        <MediaControls
          duration={this.state.duration}
          isLoading={this.state.isLoading}
          mainColor="#333"
          onFullScreen={this.onFullScreen}
          onPaused={this.onPaused}
          onReplay={this.onReplay}
          onSeek={this.onSeek}
          onSeeking={this.onSeeking}
          playerState={this.state.playerState}
          progress={this.state.currentTime}
          toolbar={this.renderToolbar()}
        />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',

  },  
  mediaPlayer: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    backgroundColor: 'black',
  },
});

Screenshot : 

This is all about Video player with controllers using React Native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.