main:40 No capturado (en promesa) DOMException: el elemento no tiene fuentes admitidas. videoScroll @ main:40 index.js:1 Error no detectado: el error que proporcionó no contiene un seguimiento de la pila.

Estoy implementando esto para que solo se pueda reproducir cuando el video se reproduzca automáticamente en el centro de la pantalla, pero aparece este error. Aparece el mismo error que el título, pero no puedo encontrarlo, no importa cómo. mucho busco, por favor dime como solucionarlo

 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>