JSFiddle - React, Tailwind, and code Playground

by smombartz

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Video</title>
    <link rel="stylesheet" href="styles.css">
    <sty
</head>
<body>

    <div class="video-container">
        <video id="video" width="640" height="360" muted>
            <source src="https://tekeye.uk/html/images/Joren_Falls_Izu_Jap.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>

    <script>
    const video = document.getElementById('video');

const forwardStopTime = 2;  // Stop playing forward at 2 seconds

video.addEventListener('mouseover', () => {
    video.play();  // Start playing the video
    video.currentTime = 0;  // Ensure it starts from the beginning
    video.ontimeupdate = function () {
        if (video.currentTime >= forwardStopTime) {
            video.pause(); // Pause when it reaches 2 seconds
        }
    };
});

video.addEventListener('mouseout', () => {
    let currentTime = video.currentTime;
    
    // Rewind the video while the mouse is out
    video.play();
    video.ontimeupdate = function () {
        if (video.currentTime > 0) {
            video.currentTime -= 0.03;  // Rewind gradually
        } else {
            video.pause();  // Stop at the beginning
        }
    };
});
    </script>
</body>
</html>