Media Player 'Reset on play' feature but for hover rather than for autoplay

footer-scripts.html

<script>

document.addEventListener("DOMContentLoaded", () => {

    const players = document.querySelectorAll('.my-player') /* change my-player with the class of your media player elements that need this feature */

    
    players.forEach(player => {

        player.addEventListener('mouseover', () => {

            player.paused = false;

            player.setAttribute('data-x-play-reset', 'success');

            setTimeout(() => {

                player.querySelectorAll('media-play-button').forEach(playButton => {
                    playButton.setAttribute('aria-pressed', 'false');
                    playButton.removeAttribute('data-pressed');
                })

            }, 200)

            setTimeout(() => {

                player.addEventListener('media-pause-request', resetAutoPlayRequest)

                function resetAutoPlayRequest(e) {

                    function resetAutoPlay(e) {

                        player.muted = false;
                        player.currentTime = 0;
                        player.paused = false;
                        player.removeAttribute('data-x-play-reset');
                        player.removeEventListener('pause', resetAutoPlay)
                        setTimeout(() => {
                            player.setAttribute('data-x-played', 'true');
                        }, 200)
                    }

                    player.addEventListener('pause', resetAutoPlay)
                    player.removeEventListener('media-pause-request', resetAutoPlayRequest)

                }

            }, 100);

        }, {
            once: true
        })

    })

})

</script>

or if wanting to pause when the user moves the cursor away..

<script>
document.addEventListener("DOMContentLoaded", () => {

    const players = document.querySelectorAll('.my-player'); // your media player class

    players.forEach(player => {

        let userStartedPlayback = false; // track if the user clicked to play

        player.addEventListener('mouseover', () => {
            // Only do hover-preview if user hasn’t started playback
            if (!userStartedPlayback) {
                player.paused = false;
                player.setAttribute('data-x-play-reset', 'success');

                setTimeout(() => {
                    player.querySelectorAll('media-play-button').forEach(playButton => {
                        playButton.setAttribute('aria-pressed', 'false');
                        playButton.removeAttribute('data-pressed');
                    });
                }, 200);

                setTimeout(() => {

                    player.addEventListener('media-pause-request', resetAutoPlayRequest);

                    function resetAutoPlayRequest(e) {
                        function resetAutoPlay(e) {
                            player.muted = false;
                            player.currentTime = 0;
                            player.paused = false;
                            player.removeAttribute('data-x-play-reset');
                            player.removeEventListener('pause', resetAutoPlay);
                            setTimeout(() => {
                                player.setAttribute('data-x-played', 'true');
                            }, 200);
                        }

                        player.addEventListener('pause', resetAutoPlay);
                        player.removeEventListener('media-pause-request', resetAutoPlayRequest);
                    }

                }, 100);
            }
        });

        // Pause on mouse leave if still in hover-preview
        player.addEventListener('mouseleave', () => {
            if (!userStartedPlayback && player.hasAttribute('data-x-play-reset')) {
                player.paused = true;
            }
        });

        // Track actual user playback
        player.addEventListener('click', () => {
            userStartedPlayback = true;
            player.muted = false;
            player.removeAttribute('data-x-play-reset');
        });

    });

});
</script>