main:40 Uncaught (in promise) DOMException: The element has no supported sources. videoScroll @ main:40 index.js:1 Uncaught Error: The error you provided does not contain a stack trace.

I’m implementing this so that it can be played only when the video is automatically played back to the center of the screen, but I get this error I get the same error as the title, but I can’t find it no matter how much I search, please tell me how to solve it

main page!!
<MainProduct>
      {products.map((ele, idx) => {
        return (
          <div key={idx}>
            {products.length - 1 === idx ? (
              <ModelImages
                onClick={() => moveDetailPage(ele.product_seq)}
                id={ele.product_seq}
                alt={ele.product_name}
                src={ele.image_url}
                poster={ele.image_url}
                ref={ref}
                autoPlay
                muted
                loop
              />
            ) : (
              <ModelImages
                onClick={() => moveDetailPage(ele.product_seq)}
                id={ele.product_seq}
                alt={ele.product_name}
                src={ele.image_url}
                poster={ele.image_url}
                autoPlay
                muted
                loop
              />
            )}
          </div>
        );
      })}
    </MainProduct>
---------------------------------------------
index.html!!
<script type=“text/javascript”>
      window.addEventListener(‘load’, videoScroll);
      window.addEventListener(‘scroll’, videoScroll);
      function videoScroll() {
        if (document.querySelectorAll(‘video[autoplay]’).length > 0) {
          var windowHeight = window.innerHeight,
            videoEl = document.querySelectorAll(‘video[autoplay]’);
          for (var i = 0; i < videoEl.length; i++) {
            var thisVideoEl = videoEl[i],
              videoHeight = thisVideoEl.clientHeight,
              videoClientRect = thisVideoEl.getBoundingClientRect().top;
            if (
              videoClientRect <= windowHeight - videoHeight * 0.5 &&
              videoClientRect >= 0 - videoHeight * 0.5
            ) {
              thisVideoEl.play();
            } else {
              thisVideoEl.pause();
            }
          }
        }
      }
    </script>