Как воспроизвести видео один раз при появление в области просмотра экрана

Как сделать так, чтобы видео воспроизводилось один раз при появление в области видимости. У меня получается либо оно проигрывается бесконечно находясь в области видимости, если запускаю видео методом play(), либо проигрывается один раз при загрузке или обновление, если добавляю атрибуту autoPlay значение 'true', но в область видимости может не попасть. Пробовала отключить воспроизведение меняя src, но в консоли куча ошибок, например: "Uncaught (in promise) DOMException: The play() request was interrupted by a new load request." и сайт очень сильно тормозит и другие анимации начинают работать некорректно.

  const isShouldAnimationAdvantageStart = () => {
    const animationAdvantage = document.getElementById('animation-advantage')
    const animationAdvantageCoords = animationAdvantage.getBoundingClientRect()
    const windowHeight = window.innerHeight
      ? window.innerHeight
      : document.documentElement.clientHeight
      ? document.documentElement.clientHeight
      : document.body.offsetHeight
    return (
      animationAdvantageCoords.top > document.body.scrollTop &&
      animationAdvantageCoords.height + animationAdvantageCoords.top < document.body.scrollTop + windowHeight // animationAdvantage.clientHeight
    )
  }
  useEffect(() => {
    const animationAdvantage = document.getElementById('animation-advantage')

    if (isShouldAnimationAdvantageStart()) {
      setStartAnimationAdvantage(true)
      animationAdvantage.play()
    }

    if (!isShouldAnimationAdvantageStart()) {
      setStartAnimationAdvantage(false)
    }

    setTimeout(function() {
      setInterval(function() {
        animationAdvantage.src = ''
        setStartAnimationAdvantage(false)
      }, 3450)
    }, 3450)
  }, [isShouldAnimationAdvantageStart])

  return (<video
          muted
          autoPlay={startAnimationAdvantage}
          id='animation-advantage'
          width='555px'
          height='555px'
          poster={imageAdvantage}
        >
          <source src={videoAdvantage} type='video/mp4' />
          Your browser does not support the video tag.
        </video>
     )