如何更新状态以使我的计时器在视频加载后运行

Question

我是React的新手。我有点困扰问题，需要了解一些有关状态更新的指针。

问题：我正在加载视频，并添加“跳过”按钮以从屏幕上删除视频。视频将通过模式下的HTML播放。问题是我的视频负载在页面刷新和模态将在加载视频之前打开后的2或3秒内。我将计时器设置为5秒钟，该计时器的反向格式，例如5、4、3、2、1，跳过，

但由于视频负载缓慢，计时器在后台运行，当视频显示时，有时会看到3， 2，1，跳过

我要寻找的是当我的视频启动加载时，只有我的计时器函数触发。

我尝试过Onload（），onstart（）将标志状态从false到true和componentDidmount-＆gt;根据状态加载页面，但没有运气，

这是我的代码：

export default class FullScreenAds extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFullPageVideoModalEnabled: false,
      timerForVideo: 7,
      isDisabled: true,
    };
  },
  async componentDidMount() {
    const uuid = Math.round((new Date()).getTime() / 1000);
    let getUserSession = localStorage.getItem("gid");
    if (getUserSession === null || getUserSession.length < 1) {
      localStorage.setItem("gid", uuid);
    }
    this.setState({
      isFullPageVideoModalEnabled: true,
      getSession: getUserSession
    })
    this.startTimer()
  },
  async startTimer() {
    // await sleep(3000);
    this.timer = setInterval(() => {
      const { timerForVideo } = this.state

      if (timerForAds > 0) {
        this.setState(({ timerForVideo }) => ({
          timerForVideo: timerForVideo - 1
        }))
      }
      if (timerForAds === 0) {
        this.setState({ isDisabled: false })
        clearInterval(this.timer)
      }
    }, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }
  render() {
    return (
      // run the modal based on state and load the video
    <video  width="100%" height="auto" autoPlay playsInline loop>
        <source type="video/mp4" src="video/src/url" />
    </video>
    )
  }
}

Answer 1

使用react.CreateEf（）创建参考，然后将参考附加到视频中，然后在视频中聆听onplay事件，然后在OnPlay事件启动时启动计时器：

尝试以下操作：

export default class FullScreenAds extends React.Component {
  constructor(props) {
    super(props);
    this.videoRef = React.createRef()
    this.state = {
      isFullPageVideoModalEnabled: false,
      timerForVideo: 7,
      isDisabled: true,
    };
  },
  async componentDidMount() {
    const uuid = Math.round((new Date()).getTime() / 1000);
    let getUserSession = localStorage.getItem("gid");
    if (getUserSession === null || getUserSession.length < 1) {
      localStorage.setItem("gid", uuid);
    }
    this.setState({
      isFullPageVideoModalEnabled: true,
      getSession: getUserSession
    })
    this.videoRef.current.onplay = () => this.startTimer();
  },
  async startTimer() {
    // await sleep(3000);
    this.timer = setInterval(() => {
      const { timerForVideo } = this.state

      if (timerForAds > 0) {
        this.setState(({ timerForVideo }) => ({
          timerForVideo: timerForVideo - 1
        }))
      }
      if (timerForAds === 0) {
        this.setState({ isDisabled: false })
        clearInterval(this.timer)
      }
    }, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }
  render() {
    return (
      // run the modal based on state and load the video
    <video ref={this.videoRef} width="100%" height="auto" autoPlay playsInline loop>
        <source type="video/mp4" src="video/src/url" />
    </video>
    )
  }
}

Answer 2

或者，您可以尝试将功能组件与钩子一起使用。

这样的事情：

export const FullScreenAds = () => {
  const [state, setState] = React.useState({
    isFullPageVideoModalEnabled: false,
    timerForVideo: 7,
    isDisabled: true,
  });
  const videoRef = React.useRef();
  const timerRef = React.useRef();

  const startTimer = () => {
    timerRef.current = setInterval(() => {
      const { timerForVideo } = state;

      if (timerForAds > 0) {
        setState({
          ...state,
          timerForVideo: state.timerForVideo - 1,
        });
      }
      if (timerForAds === 0) {
        setState({ ...state, isDisabled: false });
        clearInterval(this.timer);
      }
    }, 1000);
  };

  useEffect(() => {
    const uuid = Math.round(new Date().getTime() / 1000);
    let getUserSession = localStorage.getItem("gid");

    if (getUserSession === null || getUserSession.length < 1) {
      localStorage.setItem("gid", uuid);
    }

    setState({
      ...state,
      isFullPageVideoModalEnabled: true,
      getSession: getUserSession,
    });

    videoRef.current.onplay = startTimer;

    return clearInterval(timerRef.current);
  }, []);

  return (
    <video
      ref={this.videoRef}
      width="100%"
      height="auto"
      autoPlay
      playsInline
      loop
    >
      <source type="video/mp4" src="video/src/url" />
    </video>
  );
};