Question

以下情况是我的问题：

视频的持续时间为 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行现在移到最末端，但移动一秒钟。我的意思是，它会移动一点，停止一秒钟，再移动一点，停止一秒钟，依此类推。它无法平稳移动（每毫秒）。

但这不是正确的解决方案。

Answer 1

尝试使用parseFloat（）进行计算。

在您的问题中，我不知道哪个值是浮点数或小数，而是例如用作此值。

this.setState({
        progress: parseFloat(progress.currentTime / this.state.duration)
    });

和

const progress = parseFloat(position / 250)) * this.state.duration;

希望它会对您有所帮助。

Progress.CurrentTime！==持续时间（本机视频）

1 个答案: