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

Posted 2023-03-15

【中文标题】React-Native-Video 如何在视频未全屏或不在屏幕时暂停视频

【英文标题】：React-Native-Video how to pause the video when video not in full screen or off the screen

【发布时间】：2019-12-03 06:40:17

【问题描述】：

我正在使用 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需要与视频一起移动或隐藏。所以请帮忙我来解决这两个问题。

【问题讨论】：

任何人都知道解决方案...先生

【参考方案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 的原始分支，因为他不积极维护库，我继续使用他的分支。

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

【讨论】：

感谢重播@FreakyCoder ```` import MediaControls, PLAYER_STATES from 'react-native-media-controls'; ````它不支持，因为它从过去两年没有任何更新，所以我正在寻找使用react-native-video包的代码，您还有什么建议

会和 react 原生视频集成，不需要自己操作 rn 视频

但是我遇到了错误，我已经尝试过原始包也 react-native-media-controls import MediaControls, PLAYER_STATES from 'react-native-media-controls';

我已经在我的包上修复和开发了这么多东西，你为什么不试试呢？

出现类型错误：this3.renderToolbar is not a function this.renderToolbar() is undefined