平滑在'onTimeUpdate`上更新的轨迹栏的移动

Question

我有一个基本组件，其中包含视频和自定义进度条以及视频标记。剥离，看起来像这样：

export default class Player extends Component {
  state = {
    position: 0,
    duration: 0,
  };

  onDurationChange = ({ target: { duration } }) => this.setState({ duration });

  onTimeUpdate = ({ target: { currentTime: position } }) => this.setState({ position });

  render() {
    const { src } = this.props;
    const { position, duration } = this.state;

    return (
      <div className={styles.container}>
        <ProgressBar progress={position / duration} />
        <video
          src={src}
          onTimeUpdate={this.onTimeUpdate}
          onDurationChange={this.onDurationChange}
        />
      </div>
    );
  }
}

但是，我遇到的问题是时间更新以某种“不一致”的间隔运行。我迷上了componentDidUpdate并记录了以下时间间隔：

这使transition: width 1s linear;看起来不太正确。但是，我真的想要平滑这个进度条的运动。建议的做法是什么？

Answer 1

这是一个使用react-motion动画的解决方案，取自我的react-jPlayer库。

这假设进度将用于width中div的<Progress />样式。

const currentProgressAbsolute = (position, duration) => 100 * (position / duration);

<Motion style={{ smoothProgress: spring(currentProgressAbsolute , [250]) }}>
  {values => <ProgressBar progress={values.smoothProgress} /> }
</Motion>

Answer 2

您可以记录上一次，然后在 ontimeupdate 发生时计算 currentTime - 上一次的时间差。然后您可以使用它来更新 CSS 过渡。

var vid = document.getElementById("my-video");
var previousTime = 0;
vid.ontimeupdate = function(){
    timeGap = vid.currentTime - previousTime;
    previousTime = vid.currentTime;
    var percentage = ( vid.currentTime / vid.duration ) * 100;
    document.getElementById("current").style.transition = "left "+timeGap+"s linear 0s";
    document.getElementById("current").style.left = percentage+"%";
};