CODEWITHSUNDEEP
javascripthtmlvideo
WebTim
WebTim

Reputation: 247

HTML5 Video - position of clicks

Okay, I want a user to be able to click on a particular area of a video and x happens, otherwise nothing happens, with pure JavaScript, not Jquery...

I've got:

document.getElementById('videoEle').addEventListener('click',handleClick,false);
function handleClick() {
if(video.currentTime > 24.5 && video.currentTime < 29)
    {
        console.log("Good timed click: " + video.currentTime);
    } else {
        console.log(video.currentTime);
    }
}

There's things I intend to do like change the src of the video if they click in the right time and the right position, but I can't find anything on positional clicking on a HTML5 Video element. Is it even possible yet?

I am also using customised buttons, not that it should make a difference.

Thanks in advance!

Upvotes: 0

Views: 2942

Answers (1)

Mr. Blah
Mr. Blah

Reputation: 26

Try using this:

videoElement = document.getElementByID("videoEle");
videoElement.addEventListener("mousedown", handleClick, false);
handleClick = function(e) {
    if(videoElement.currentTime > 24.5 && videoElement.currentTime < 29) {
        console.log("Good timed click: " + videoElement.currentTime);
    } else {
        console.log(videoElement.currentTime);
    }
    console.log("Mouse-X: " + (e.clientX + window.pageXOffset));
    console.log("Mouse-Y: " + (e.clientY + window.pageYOffset));
    e.preventDefault();
}

Note that MouseEvent (e).clientX and clientY give the X and Y coordinates of the mouse relative to the window without taking scrolling into account. To fix this, you have to add window.pageXOffset and window.pageYOffset. window.pageXOffset and window.pageYOffset are not supported in old versions of IE, however. The e.preventDefault() is there to prevent the video from pausing when you click it.

Upvotes: 1

Related Questions