以下情况是我的问题:
视频的持续时间为 6.357 秒。 progress.currentTime 只会转到 6.154 并停止。
因为 this.state.progress = 0.97(而不是1.0)。结果,我的 ProgressBar 并没有结束。它停止在0.97位置,并且 onProgressPress()不起作用。
有人可以帮忙吗?
这是我的代码:
export default class VideoComp extends Component {
state = {
paused: false,
progress: 0,
duration: 0
}
onProgressPress = (e) => {
const position = e.nativeEvent.locationX;
const progress = (position / 250) * this.state.duration;
this.player.seek(progress);
}
onMainButtonPress = () => {
if(this.state.progress >= 1) {
this.player.seek(0);
};
this.setState(state => {
return {
paused: !state.paused
}
})
}
handleEnd = () => {
this.setState({
paused: true
})
}
handleProgress = (progress) => {
this.setState({
progress: progress.currentTime / this.state.duration
});
}
handleLoad = (meta) => {
this.setState({
duration: meta.duration
})
}
render() {
const { width } = Dimensions.get('window');
const height = width * 0.5625;
return(
<View style = {styles.videoWrapper}>
<Video
source = {{uri: this.props.videoURL}}
ref = {ref => this.player = ref}
style = {{width: '100%', height}}
paused = {this.state.paused}
resizeMode = 'contain'
onLoad = {this.handleLoad}
onProgress = {this.handleProgress}
onEnd = {this.handleEnd}
/>
<View style = {styles.controls}>
<TouchableWithoutFeedback onPress = {this.onMainButtonPress}>
<IconSimpleLine name = {!this.state.paused ? 'control-pause' : 'control-play'} color = {text} size = {20}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress = {this.onProgressPress}>
<View>
<ProgressBar
progress = {this.state.progress}
width = {250}
height = {5}
color = {text}
borderColor = {text}
unfilledColor = 'rgba(255, 255, 255, 0.3)'
/>
</View>
</TouchableWithoutFeedback>
<Text style = {styles.duration}>
{secondsToTime(Math.floor(this.state.progress * this.state.duration))}
</Text>
</View>
</View>
)
}
}
UPDATE
我尝试了下一个:
handleProgress = (progress) => {
this.setState({
progress: Math.floor(progress.currentTime) / this.state.duration
});
}
handleLoad = (meta) => {
this.setState({
duration: Math.floor(meta.duration)
})
}
ProgressBar行现在移到最末端,但移动一秒钟。我的意思是,它会移动一点,停止一秒钟,再移动一点,停止一秒钟,依此类推。它无法平稳移动(每毫秒)。
但这不是正确的解决方案。
答案 0 :(得分:0)
尝试使用parseFloat()进行计算。
在您的问题中,我不知道哪个值是浮点数或小数,而是例如用作此值。
this.setState({
progress: parseFloat(progress.currentTime / this.state.duration)
});
和
const progress = parseFloat(position / 250)) * this.state.duration;
希望它会对您有所帮助。