I have a list of videos. I only need to play the video when hover it. Other wise in need to show a default image that I have provided.
Lets say I have a coding like this. When I hover the card it need to play the video and when I am not hovering it need to show an image.
<Card>
<video src={video} />
</Card>
I have used the npm package react-hover-video-player, but I don't to use an external package to do this. Is there a way to do this in React JS (Typescript)?
How about make a new state for hovering and render conditionally ?
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>