Tengo una lista de videos. Solo necesito reproducir el video cuando lo desplazo. De lo contrario, es necesario mostrar una imagen predeterminada que he proporcionado.
Digamos que tengo una codificación como esta. Cuando paso el cursor sobre la tarjeta, necesita reproducir el video y cuando no estoy pasando el cursor, necesita mostrar una imagen.
<Card> <video src={video} /> </Card> He usado el paquete npm react-hover-video-player , pero no debo usar un paquete externo para hacer esto. ¿Hay alguna manera de hacer esto en React JS (Typescript)?
¿Qué tal hacer un nuevo estado para flotar y renderizar condicionalmente?
const [hover, setHover] = useState(false); <Card onMouseEnter={(e:React.MouseEvent) => setHover(true)} onMouseLeave={(e:React.MouseEvent) => setHover(false)} > {hover ? <video src={video} /> : <image src={image} />} </Card>