react-native-video: Position difference between seekTime and currentTime is too large when video seek

When I try to seek using ref.seek(time), Position difference between seekTime and currentTime is too large on ‘onSeek’

I wanted to seek 23sec, but onSeek gave me currentTime 19sec.

Is there any solution to solve this problem?

Library version: 5.0.2

Steps To Reproduce

untitled

Expected behaviour

  1. seek(23)
  2. onSeek={data => console.log(data.currentTime)} // currentTime -> ±0.5sec

Reproducible sample code

import React from 'react';
import {inject, observer} from 'mobx-react';

import {StoreTypes} from '~/store';
import ApplicationStore from '~/store/ApplicationStore';

import {ScreenContainer, Text, Button} from '~/monade/UI';
import Video from 'react-native-video';
import RNBackgroundDownloader from 'react-native-background-downloader';
import {Dimensions} from 'react-native';

interface Props {
  applicationStore?: ApplicationStore;
}

interface State {
  currentTime: number;
}

@inject((store: StoreTypes) => ({
  applicationStore: store.applicationStore,
}))
@observer
export default class Screen extends React.Component<Props> {
  player: Video | null = null;

  state = {
    currentTime: 0,
  };

  render() {
    const videoDest = `${RNBackgroundDownloader.directories.documents}/video/23758.mp4`;
    const videoSize = {
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').width * (9 / 16),
    };

    return (
      <ScreenContainer>
        <Video
          source={{uri: videoDest}}
          ref={ref => (this.player = ref)}
          style={{...videoSize}}
          onProgress={({currentTime}) => this.setState({currentTime})}
          onEnd={() => {
            this.setState({pause: true, currentTime: 0});
          }}
          currentTime={this.state.currentTime}
          onSeek={data => {
            console.log(data);
            this.setState({currentTime: data.seekTime});
          }}
        />
        <Text>{`current time: ${this.state.currentTime}`}</Text>
        <Button title={'to 10sec'} onPress={() => this.player?.seek(10)} />
        <Button title={'to 20sec'} onPress={() => this.player?.seek(20)} />
        <Button title={'to 23sec'} onPress={() => this.player?.seek(23)} />
      </ScreenContainer>
    );
  }
}

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 16
  • Comments: 15

Most upvoted comments

If it helps, I only experience this with some videos. I believe it has to do with the keyframe interval of the video. If you have the ability to encode the video, you can set this keyframe interval parameter (along with many others that might help) using ffmpeg.