在react-native-video中使用seek的意外行为

ndh0cuux  于 2023-03-19  发布在  React
关注(0)|答案(4)|浏览(156)

在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
zfciruhq

zfciruhq1#

我也遇到过同样的问题,每次倒放的时候,视频就往前放,问题是视频格式的问题,我之前用的是Webm格式,现在MP4格式解决了问题,P.S.抱歉回复晚了。

vq8itlhq

vq8itlhq2#

ffmpeg -i input.mp4 -force_key_frames "expr:gte(t,n_forced*1)"  output.mp4

通过强制向视频添加关键帧解决。

u3r8eeie

u3r8eeie3#

因此,我的解决方案是将第640行从android/src/main/java/com/brentvatne/react/ www.example.com更改ReactVideoView.java

- super.seekTo(msec);
+ mMediaPlayer.seekTo(msec,3);

原始答复:https://github.com/react-native-video/react-native-video/issues/2230#issuecomment-892982288

ffdz8vbo

ffdz8vbo4#

我自己也经历过这个问题,经过一番努力,我找到了问题的原因。当你点击你使用的进度条的未填充部分时,你正在得到你给出的宽度的locationX数据,它工作正常,然而当你点击填充部分时,它给出了填充部分的比例的宽度,所以它将其分配给相应的切片,实际上,工作原理是正确的,如果我来看看我是怎么解决的。
您可以通过向用作 Package 器的View组件添加pointerEvents="box-only"来解决此问题。

<View pointerEvents="box-only">
    <Progress.Bar
        progress={state.progress}
        color={"#fff"}
        unfilledColor={"rgba(255,255,255,0.5)"}
        width={250}
        height={15}
    />
</View>

相关问题