how to make popup open automatically while watching video

user_13224113 0
Viewed 155

I have a video player in React, I need to open popup / modal window to check user is not a robot on a random second of video watching.

Algorythm: user opens website -> watches the video -> on a random second popup / modal appears -> user confirms captcha (I'm not a robot) -> modal/popup disappears - > video proceed playing.

bootstrap-modal reactjs javascript
1 Answers

A bit more info like code snippet and packages you're using would be helpful. But if you are using react-player, you can do something like this:

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' />
  )
}
user_44256810
Related