问题描述
我想显示一个按钮(继续),只有当我完成在 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}
/>
}
}