javascript - html5 onClick toggled by clicking controls -

i added event listener video element users can play or pause video clicking anywhere on element. noticed event fires when click on video controls (such changing volume slider), not intention.

is there relatively simple workaround this?

you can handle onclick event of video element function accepts event argument. event argument populated lot of data mouse click, including x/y position in layer (which should video tag)

from there can trigger play/pause event when click in areas of video. i've included example below handle clicks everywhere in video except bottom 50 pixels.

document.getelementbyid("videoelement").onclick = function(ev){     var vid = document.getelementbyid("videoelement");     var heightofcontrols = 50;  // you'll have figure out height use unclickable region controls are. // used 50 pixels example.     var areaabovecontrols = vid.height - heightofcontrols;  // layery attribute of event lets know mouse within topmost layer when click occurred. // using can find out in video , react accordingly. // remember 0 @ top of screen on y axis, need use greater find out if it's below // our area above controls.     if(ev.layery > areaabovecontrols)     {         alert("clicked controls!");     }     else     {         alert("did not click controls");         // raise play/pause event here since controls won't handle event , can safely toggle play/pause.     } }; 

with little bit of experimentation should able find nice value heightofcontrols gives behavior you're looking for.

fiddle: http://jsfiddle.net/htyck/4/

hope helps!