android React-Native-Video如何在视频未全屏显示或关闭屏幕时暂停视频

kupeojn6  于 2023-02-20  发布在  Android
关注(0)|答案(1)|浏览(156)

我正在做一个Android视频库应用程序,如YouTube使用React原生,因为我正在使用'React原生视频',软件包虽然使用它,我有一个视频自动播放选项的问题,所有的视频都在后台播放一次,而不查看视频,另一个问题是所有的视频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}需要移动或隐藏沿着video.So请帮助我找到这两个问题的解决方案。

nhhxz33t

nhhxz33t1#

您可以使用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的原始分支,因为他不主动维护库,所以我继续使用他的分支。
我相信这个图书馆会解决你的问题。

相关问题