Change Hover Cursor on Video Play or Pause, Detect Each Video State Play or Pause

native .js way to detect the html video element playing depending on state showing play or pause icon on cursor hovering the player.

document.addEventListener("DOMContentLoaded", function() {
    // Get all elements with the selector ".video-div .each-video"
    var elements = document.querySelectorAll(".video-div .each-video");

    // Loop through all elements
    elements.forEach(function(element) {
        // When mouse enters the element, change the cursor
        element.addEventListener('mouseenter', function() {
            // If the video is not paused (i.e., it's playing), change the cursor to 'pause'
            if (!element.paused) {
                document.body.style.cursor = 'url(pause-button.png), auto';
            } else {
                document.body.style.cursor = 'url(play-button.png), auto';
            }
        });

        // When mouse leaves the element, reset the cursor
        element.addEventListener('mouseleave', function() {
            document.body.style.cursor = 'auto';
        });

        // When the video's 'playing' status changes, check if we should change the cursor
        element.addEventListener('play', function() {
            document.body.style.cursor = 'url(pause-button.png), auto';
        });

        element.addEventListener('pause', function() {
            document.body.style.cursor = 'url(play-button.png), auto';
        });
    });
});