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

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/59151432/react-native-video-how-to-pause-the-video-when-video-not-in-full-screen-or-off-t