JSFiddle - React, Tailwind, and code Playground

by Gustavo Carvalho

HTML

<video id="videoElement" height="300px" width="300px" src="video.mpeg" style="border:1px; border-style: solid;" />

JavaScript

document.getElementById("videoElement").onclick = function(ev){
    var vid = document.getElementById("videoElement");
    var heightOfControls = 50; 
    // You'll have to figure out a good height to use for your unclickable region where the controls are.
    // I used 50 pixels as an example.
    var areaAboveControls = vid.height - heightOfControls;
    
    // the layerY attribute of the event lets us know where the mouse was within the topmost layer when the click occurred.
    // Using this we can find out where we are in the video and react accordingly.
    // Remember that 0 is at the top of the screen on the Y axis, so we need to use greater than to find out if it's BELOW
    // our area above the controls.
    if(ev.layerY > areaAboveControls)
    {
        alert("Clicked controls!");
    }
    else
    {
        alert("Did not click controls");
        // Raise play/pause event from here since the controls won't handle the event and we can safely toggle play/pause.
    }
};