在本机视频结束后显示按钮

如何解决在本机视频结束后显示按钮

我想显示一个按钮（继续），只有当我完成在 React Native 中看到整个视频时我正在观看我上传到 Firebase 存储的视频

我有可能知道我什么时候到达视频的结尾吗？

export default class VideoModalChild extends React.Component{
    constructor(props){
        super(props)
        this.state={
            showTaskVisible:false
        }
    }


render(){
    const task=this.props.task;
        return(
            <CustomBackground>
                <Modal animationType="slide" visible={this.state.showTaskVisible} onRequestClose={()=>this.toggleisModal()}>
                     <TodoModalChild task={task} closeModal={()=>this.toggleisModal()}/>
                </Modal>

                <KeyboardAvoidingView>
                     <SafeAreaView>                    
                        <View>
  
                           {task.video? (
                           <Video
                              source={{uri:task.video}} 
                              shouldplay
                              muted={true}
                              repeat={true}
                              resizeMode={"cover"}
                              rate={1.0}
                              ignoreSilentSwitch={"obey"}
                              />
                              ):(
                          <Image source={white}}/>
                          )}
                        </View>

                        <TouchableOpacity onPress={()=>this.toggleisModal()}>    
                            <Text>Continuuuue</Text>
                        </TouchableOpacity>

                     </SafeAreaView>
                </KeyboardAvoidingView>
            </CustomBackground>
        )
    }
}

解决方法

您可以通过向 onPlaybackStatusUpdate 道具传递回调来跟踪视频的状态。

关于播放状态的更多信息在这里： https://docs.expo.io/versions/latest/sdk/av/#playback-status

例如：

export default class VideoModalChild extends React.Component {
...
onStatusUpdate = (status) => {
  if(status.didJustFinish) {
    // set state or do whatever you need to
   }
}
render() {
  <Video 
    onPlaybackStatusUpdate={this.onStatusUpdate} 
    {...props} 
  />
}
}