如何在观看视频时自动打开弹出窗口

Question

我在React中有一个视频播放器，我需要打开弹出/模式窗口来检查用户是否在观看视频的随机秒数上不是机器人。

算法:用户打开网站->观看视频->在随机的第二个弹出窗口/模式出现->用户确认验证码(我不是机器人) ->模式/弹出窗口消失->视频继续播放。

Answer 1

更多的信息，如你正在使用的代码片段和包将是有帮助的。但是如果你使用的是react-player，你可以这样做：

const Player = () => {
  const playerRef = useRef();
  const [playing, setPlaying] = useState(true)
  const [randomSecond, setRandomSecond] = useState(0)
  const [captchaConfirmed, setCaptchaConfirmed] = useState(false)

  useEffect(() => {
    if (playing || captchaConfirmed) {
      return
    }
    checkCaptcha()
  }, [playing])
  const checkCaptcha = () => {
    if (window.confirm('Are you a human')) {
      setCaptchaConfirmed(true)
      setPlaying(true)
    }
  }

  return (
    <ReactPlayer
      ref={playerRef}
      playing={playing}
      onDuration={(duration) => {
        setRandomSecond(Math.floor(Math.random() * duration))
      }}
      onPlay={() => setPlaying(true)}
      onProgress={async (data) => {
        if (captchaConfirmed || data.playedSeconds < randomSecond) {
          return
        }
        setPlaying(false)
      }}
      url='https://www.youtube.com/watch?v=HYDs1FNNvfs' />
  )
}