在react-native-video中,每当我点击(自定义)进度条上的值小于50%(一半)时,视频就会跳转到开始,而不是寻找正确的时间。当我点击50%以上时,它会跳转到50%。实际上它不是50,更像是55-60,但无论如何。这真的很奇怪,在网上找不到任何东西!
import Video from 'react-native-video';
import ProgressBar from "react-native-progress/Bar";
class Welcome extends React.Component {
player;
constructor(props) {
super(props)
//this.player = React.createRef();
this.state = {
paused: false,
loaded: false,
progress: 0,
duration: 0,
pressed:false,
screenType: 'contain',
};
console.log("--- Screen --- Welcome")
}
componentDidMount = () => {
setTimeout(() => {
this.player.seek(8)
},8000)
}
handleMainButtonTouch = () => {
console.log("inside handleMainButtonTouch")
console.log(this.state.progress)
if (this.state.progress >= 1) {
this.player.seek(0);
}
this.setState(state => {
return {
paused: !state.paused,
};
});
};
handleProgressPress = e => {
const position = e.nativeEvent.locationX;
const progress = parseFloat(position / 250) * this.state.duration;
const isPlaying = !this.state.paused;
this.player.seek(progress);
};
handleProgress = progress => {
this.setState({
progress: parseFloat(progress.currentTime) / parseFloat(this.state.duration),
});
};
handleEnd = () => {
this.setState({
paused: true ,
progress: 0 ,
});
this.player.seek(0);
};
handleLoad = meta => {
this.setState({
loaded: true,
duration: meta.duration,
});
};
handleFullScreen = () => {
if (this.state.screenType == 'contain')
this.setState({ screenType: 'cover' });
else this.setState({ screenType: 'contain' });
};
render() {
return (
<View style={styles.container}>
<View style={this.handleOuterViewStyle()}>
<Video
paused={this.state.paused}
source={{uri: "https://res.cloudinary.com/dy6bbey4u/video/upload/v1565532579/fam/videos/sample.mp4"}}
resizeMode={this.state.screenType}
onLoad={this.handleLoad}
onProgress={this.handleProgress}
onEnd={this.handleEnd}
ref={ref => {
this.player = ref;
}}
/>
{ this.state.loaded &&
<View style={styles.controls}>
<TouchableWithoutFeedback onPress={this.handleMainButtonTouch}>
<Text>Play</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleProgressPress}>
<View>
<ProgressBar
animated={false}
progress={this.state.progress}
color="#FFF"
borderColor="#FFF"
width={250}
height={20}
/>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleFullScreen}>
<Text style={styles.fullscreenButton}>Full</Text>
</TouchableWithoutFeedback>
</View>
}
</View>
</View>
)
}
}
export default Welcome
4条答案
按热度按时间zfciruhq1#
我也遇到过同样的问题,每次倒放的时候,视频就往前放,问题是视频格式的问题,我之前用的是Webm格式,现在MP4格式解决了问题,P.S.抱歉回复晚了。
vq8itlhq2#
通过强制向视频添加关键帧解决。
u3r8eeie3#
因此,我的解决方案是将第640行从android/src/main/java/com/brentvatne/react/ www.example.com更改ReactVideoView.java
原始答复:https://github.com/react-native-video/react-native-video/issues/2230#issuecomment-892982288
ffdz8vbo4#
我自己也经历过这个问题,经过一番努力,我找到了问题的原因。当你点击你使用的进度条的未填充部分时,你正在得到你给出的宽度的locationX数据,它工作正常,然而当你点击填充部分时,它给出了填充部分的比例的宽度,所以它将其分配给相应的切片,实际上,工作原理是正确的,如果我来看看我是怎么解决的。
您可以通过向用作 Package 器的View组件添加
pointerEvents="box-only"
来解决此问题。