React-Native-Video 如何在视频未全屏或不在屏幕时暂停视频

Question

我正在使用 React-Native 制作一个像 YouTube 这样的 Android 视频库应用程序，因为我正在使用 'react-native-video' 包 使用它时，我遇到了视频自动播放选项的问题，所有视频都在播放在后台没有观看视频的时间，另一个问题是所有视频controls={true} 在滚动视频时都在显示并且它们没有与视频一起移动。我在 FlatList 中做这一切 我的代码：

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>
       )
     }
}

一旦清楚地检查代码并告诉我如何仅在用户查看视频并且在剩余时间它处于暂停模式时播放视频。视频controls={true}需要与视频一起移动或隐藏。所以请帮忙我来解决这两个问题。

Answer 1

您可以使用React Native Media Controls 自定义视频控件所需的一切。它只是操纵视频控件。

它的用法也很简单：

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>
    );
  }

这是 https://github.com/charliesbot/react-native-media-controls 的原始分支，因为他不积极维护库，我继续使用他的分支。

我相信这个库会解决你的问题。