how to play video on mouse hover

Explore our JavaScript category, where you’ll find loads of helpful articles and tutorials for everyone, whether you’re just starting out or a pro developer. Learn about different JavaScript functions that can be used in various projects according to their specific requirements.
This Code embedded a video element in HTML with some JavaScript functions for controlling playback behavior.
<video muted onmouseover="this.play()" onmouseout="this.pause(); this.currentTime=0;" poster="video1.jpg">
<source src="video1.mp4" type="video/mp4">
</video>
Muted: This attribute sets the initial state of the video to muted, meaning the sound won’t play.
onmouseover=”this.play()”: When the mouse cursor hovers over the video, this JavaScript function play() is triggered, which starts playing the video.
onmouseout=”this.pause(); this.currentTime=0;”: When the mouse cursor moves away from the video, this JavaScript function pause() is triggered, which pauses the video. Additionally, it resets the video to the beginning by setting currentTime to 0.
poster=”video1.jpg”: This attribute specifies an image to be displayed as the video’s thumbnail before the video is played. In this case, “video1.jpg” is used as the poster image.
<source src=”video1.mp4″ type=”video/mp4″>: This specifies the video file to be played (“video1.mp4”) and its MIME type (“video/mp4”).