جاوا اسکریپت - پخش ویدئو هنگام قرار گرفتن موس روی یک کارت و نمایش تصویر پیشفرض زمانی که موس روی آن قرار ندارد در ریاکت جیاس

من یک لیست از ویدیوها دارم. من فقط نیاز دارم ویدیو زمانی که روی آن میروم پخش شود. در غیر این صورت نیاز دارم تصویری پیشفرض که ارائه دادهام نمایش داده شود.

فرض کنید من چنین کدی دارم. وقتی ماوس را روی کارت میبرم، باید ویدیو پخش شود و وقتی ماوس روی آن نیست، باید یک تصویر نمایش داده شود.

<Card>
     <video src={video} />
</Card>

من از بسته npm react-hover-video-player استفاده کردهام، اما نمیخواهم از یک بسته خارجی برای انجام این کار استفاده کنم. آیا راهی برای انجام این کار در React JS (Typescript) وجود دارد؟

پاسخ شماره ۱

چطور است که یک حالت جدید برای هاور کردن ایجاد کنیم و بهصورت شرطی رندر کنیم؟

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>