Play video when hover a card and show a default image when not hovering in react js

user_13942764 0
Viewed 686

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)?

typescript reactjs css javascript
1 Answers

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>
user_138038230
Related