Hover effect only on part of div (disabling part of video progress bar)

Question

I'm working on an interactive video player in Moodle. My current issue is the following: I try to overlay a part of the progressbar with a div that shows that you can't skip ahead a current position. I prepeared a fiddle as minimal example:

https://jsfiddle.net/Famondir/ne123Lca/2/

waitForElm('.vjs-progress-holder').then((playheadWell) => {
            
                // Add yellow blocker
                var elem = document.createElement("div");
                elem.className = "vjs-marker vjs-blocker";
                var elemSpan = document.createElement("span");
                elemSpan.textContent = "Hierhin können Sie noch nicht springen.";
                elem.appendChild(elemSpan);
                elem.style.left = 50 + "%";
                elem.style.width = 50 + "%"
                
                playheadWell.appendChild(elem);
            });
            

        
        // Quelle: https://stackoverflow.com/a/61511955/14406173
        function waitForElm(selector) {
            return new Promise(resolve => {
                if (document.querySelector(selector)) {
                    return resolve(document.querySelector(selector));
                }

                const observer = new MutationObserver(mutations => {
                    if (document.querySelector(selector)) {
                        resolve(document.querySelector(selector));
                        observer.disconnect();
                    }
                });

                observer.observe(document.body, {
                    childList: true,
                    subtree: true
                });
            });
        }

.vjs-marker {
  position: absolute;
  background: red;
  width: 5px;
  height: 110%;
  z-index: 30;
  margin-left: -3px;
}

.vjs-marker span {
  position: absolute;
  bottom: 15px;
  opacity: 0;
  margin-left: -20px;
  z-index: 90;
  background: rgba(0, 0, 0, 0.8);
  padding: 8px;
  font-size: 10px;
}

.vjs-marker:hover span {
  opacity: 1;
}

.vjs-blocker {
  background: yellow;
  z-index: 0;
  margin-left: 0px;
}

/* in my moodle vjs player this hides the mouse over display hover completely (not working here) */
.video-js .vjs-progress-control:hover .vjs-mouse-display {
  display: none;
}

<head>
  <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
</head>

<video class="video-js" controls preload="auto" data-setup='{"height": 360}'>
    <source src="https://mediathek.htw-berlin.de/getMedium/Default/531c43cd4e70b7ead9d6b01118ae26a7.mp4" type='video/mp4'>
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>
  
  <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>

In the moodle vjs player I can disable the hover div for videotime on mouse position successfully but only for the whole progress bar. Have a look on the picture below. (Unfortunately it's not working in the fiddle at all. Probably because we use an older video js player. I got the code from this issue: How to hide the current time tooltip in videojs v5?)

What I want to do is surpressing the mouse over hover only on the part where the yellow div is placed over the progressbar. I thought about something like checking the mouse position relative to the yellow div or just disable hover effects of divs that are not the most top on the z-index. Is this even possible?

I hope you can help me out.

In the picture you can see that I disabled the black mouse over hover for video position (but not the white one for current play time) and put a (black instead of yellow) div on the rest of the progress bar that states (translated in English): "You can't skip to this position now". I already implemented code that prohibits skipping foreward to the black area.

Hover effect only on part of div (disabling part of video progress bar)

0 Answers0