En este momento, estoy trabajando en un proyecto que requiere que agregue tres videos a la página de inicio, pero cargarlos todos a la vez reducirá considerablemente el tiempo de carga.
También quiero usar la etiqueta <video/> en lugar de usar <iframe/> porque quiero esa funcionalidad de reproducción automática. ¿Cuál es la mejor manera de hacer esto en React? Usando NextJS y Chakra UI.
Puede usar IntersectionObserver y hacerlo como se muestra a continuación. Para React, todo lo que tiene que hacer es agregar el siguiente código en un useEffect con una dependencia vacía.
const video = document.querySelector("video"); function handleIntersection(entries) { entries.map(async (entry) => { if (entry.isIntersecting) { const res = await fetch("/video.mp4"); const data = await res.blob(); video.src = URL.createObjectURL(data); } }); } const observer = new IntersectionObserver(handleIntersection); observer.observe(video); <video autoplay muted loop playsinline></video>También usé un video con una ruta relativa para evitar posibles problemas de CORS .
encontré una manera de hacerlo usando '@react-hook/intersection-observer '
import useIntersectionObserver from '@react-hook/intersection-observer' import { useRef } from 'react' const LazyIframe = () => { const containerRef = useRef() const lockRef = useRef(false) const { isIntersecting } = useIntersectionObserver(containerRef) if (isIntersecting) { lockRef.current = true } return ( <div ref={containerRef}> {lockRef.current && ( <video src={"add video source here"} type="video/mp4" ></video> )} </div> ) }