javascript - HTML5 Video - position of clicks -
okay, want user able click on particular area of video , x happens, otherwise nothing happens, 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 intend change src of video if click in right time , right position, can't find on positional clicking on html5 video element. possible yet?
i using customised buttons, not should make difference.
thanks in advance!
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 mouseevent (e).clientx , clienty give x , y coordinates of mouse relative window without taking scrolling account. fix this, have add window.pagexoffset , window.pageyoffset. window.pagexoffset , window.pageyoffset not supported in old versions of ie, however. e.preventdefault() there prevent video pausing when click it.
Comments
Post a Comment