React-Native-Video how to pause the video when video not in full screen or off the screen

Question

i am making a Android video gallery app like YouTube using React-Native for that i am using 'react-native-video' , package While using it i had a problem with video auto-play option all videos are playing at a time in the background without viewing the videos and another problem is all videos controls={true} are showing when scrolling the video and they are not moving along with videos.I am doing all this inside FlatList My code :


import React, { Component, PropTypes } from "react";
import {
  AppRegistry, Image, Platform, StyleSheet, Text, View, TextInput, Button, TouchableHighlight, Alert,
  TouchableOpacity, ScrollView, ColorPropType, FlatList, SectionList, Dimensions,
  Keyboard, Modal, NativeModules, SafeAreaView, StatusBar, ViewPropTypes,
} from 'react-native';

import Video from 'react-native-video';
export default class HomeScreen extends Component {
 constructor(Props) {
    super(Props);
    this.state = {
      error: null,
      paused: true,
      playing: false,
    };
  }

render() {

    return (
       <View style={styles.container}>
          <View style={styles.tabContent}>
            <FlatList style={styles.list}
              data={this.state.all_Posts}             
              keyExtractor={(data_posts, index) => {
                return data_posts.id.toString();
              }}
              ItemSeparatorComponent={() => {
                return (
                  <View style={styles.separator} />
                )
              }}
              renderItem={(post, id) => {
                const items = post.item;
                return (
                  <View style={styles.card}>

                    <View style={styles.cardHeader}>

                         <View>
                          <Video
                            ref={ref => this.player = ref}
                            source={{ uri: "http://192.168.1.2:3200/" + items.file_Name }}
                            style={{ width: '100%', height: 700 }}
                            resizeMode="cover
                            volume={1.0}
                            controls={true}
                            volume={this.state.volume}
                            muted={this.state.muted}
                            paused={this.state.paused}
                            onLoad={this.onLoad}
                            onBuffer={this.onBuffer}
                            onError={this.videoError}
                            onProgress={this.onProgress}

                          />


                        </View>
                 </View>
               )
              }}
            />
          </View>
        </View>
       )
     }
}

Once check the code clearly and tell me how can i play the video only when the user viewing it and in remaining time it is in pause mode.And video controls={true} need to move or hide along with video.So please help me to find the solution to those two problems.

Anyone know the solution ...Sir – Sivasankar chimata Dec 03 '19 at 09:56 — Sivasankar chimata, Dec 03 '19 at 09:56

score 0 · Answer 1 · answered Dec 03 '19 at 14:12

0

You can use React Native Media Controls to customize everything you need for the video controls. It simply manipulates the video controls.

Its usage is also simple:

import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';

  render() {
    return (
      <View style={styles.container}>
        <Video
          volume={0.0}
          resizeMode="cover"
          onEnd={this.onEnd}
          onLoad={this.onLoad}
          paused={this.state.paused}
          style={styles.mediaPlayer}
          onProgress={this.onProgress}
          onLoadStart={this.onLoadStart}
          ref={videoPlayer => (this.videoPlayer = videoPlayer)}
          source={{ uri: 'https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' }}
        />
        <MediaControls
          mainColor="orange"
          onSeek={this.onSeek}
          onReplay={this.onReplay}
          onPaused={this.onPaused}
          onSeeking={this.onSeeking}
          duration={this.state.duration}
          toolbar={this.renderToolbar()}
          isLoading={this.state.isLoading}
          onFullScreen={this.onFullScreen}
          progress={this.state.currentTime}
          playerState={this.state.playerState}
        />
      </View>
    );
  }

This is an original fork of https://github.com/charliesbot/react-native-media-controls since he does not actively maintain the library, I keep going with his fork.

I believe that this library will solve your problem.

answered Dec 03 '19 at 14:12

FreakyCoder

840
11
24

Thank you for the replay @FreakyCoder ```` import MediaControls, { PLAYER_STATES } from 'react-native-media-controls'; ```` its not supporting because it is not having any update from last two years , So i am looking for the code using react-native-video package , do you have any more suggestions – Sivasankar chimata Dec 05 '19 at 06:18
It will integrate with the react native video, you do not need to manipulate rn video itself – FreakyCoder Dec 05 '19 at 06:19
But i am getting errors , i am already tried original package also react-native-media-controls import MediaControls, { PLAYER_STATES } from 'react-native-media-controls'; – Sivasankar chimata Dec 05 '19 at 06:39
I've fixed and developed so many things on my package, why don't you give it a try? – FreakyCoder Dec 05 '19 at 06:42
getting error like type error : this3.renderToolbar is not a function this.renderToolbar() is undefined – Sivasankar chimata Dec 05 '19 at 06:51
Have you tried with the library's example code? I've tried and it works. Can you show me the implementation on your side? – FreakyCoder Dec 05 '19 at 06:54
I didn't do any changes to your code just used your code by doing copy and past and used command : => npm i @freakycoder/react-native-media-controls =>import MediaControls, { PLAYER_STATES } from 'react-native-media-controls'; – Sivasankar chimata Dec 05 '19 at 07:05
Making a test for it, I will inform you ASAP – FreakyCoder Dec 05 '19 at 07:26
thank you sir . I just posted your code in another question check it once , tell me if i done anything wrong ? https://stackoverflow.com/questions/59190227/react-native-video-all-videos-are-auto-playing-at-a-time-in-the-background-how – Sivasankar chimata Dec 05 '19 at 07:39
@Sivasankarchimata, I've updated the library itself. Can you please try it with v2.0.2? – FreakyCoder Dec 05 '19 at 07:41
Why did you open another post? – FreakyCoder Dec 05 '19 at 07:45
It was two days old post, so i just asked the question again for more response from coders , So you can reply your code here only , For about second question ,Did you check my code did you find any errors – Sivasankar chimata Dec 05 '19 at 07:53
Sir did you solve the issue because still i am getting the issue – Sivasankar chimata Dec 05 '19 at 10:23
I could not reproduce your problem, I think it is in your own code. There are two solutions for that, simply create another empty component and just add your Video & Media Controls and try it. Also, simply clone RN Media Controls and it has a working example in it, simply `npm i` and `react-native run-ios/android` to check if it works for you. – FreakyCoder Dec 05 '19 at 10:26
thank you for your response and your support , once go to this link it works for me nearly 80% https://aboutreact.com/react-native-video/ – Sivasankar chimata Dec 05 '19 at 10:46

React-Native-Video how to pause the video when video not in full screen or off the screen

1 Answers1