Question

我的要求是，页面加载时，应该从本地存储开始播放视频，但根本不播放。最初状态为 paused：true ，当视频加载时，我尝试将状态更改为false，但是视频不会自动播放。

 <Video
                      onEnd={this.handleEnd}
                      onLoad={this.handleLoad}
                      onProgress={this.handleProgress}
                      autoplay={true}
                       paused={this.state.paused}
                      ref={ref => {
                        this.player = ref;
                      }}
                      resizeMode="cover"
                      source={{uri:this.state.v_url}}
                      volume={this.state.muted==true?0.0:1.0}
                      muted={this.state.muted}
                      />



handleLoad = (meta) => {
 console.log('Its working',this.props)
  this.setState({
    duration:meta.duration,
    paused:false,
  })

Answer 1

使用@ coffeebeanslabs / react-native-inviewport检测组件是否在设备视口中：

使用以下方式安装：npm i @coffeebeanslabs/react-native-inviewport

然后在您的代码中执行以下操作：

import InViewPort from "@coffeebeanslabs/react-native-inviewport";

checkVideoVisible(isVideoVisible) { 
    this.setState({videoVisible: isVideoVisible});
}

<InViewPort onChange={(isVideoVisible) => this.checkVideoVisible(isVideoVisible)}>
    <Video
        paused={!this.state.videoVisible} 
    />
</InViewPort>

React-Native Video自动播放代码不起作用

1 个答案: