html5 onClick Kontroller tıklayarak tıklatıldıClick

Question

Kullanıcılarımın herhangi bir yerini tıklayarak videoyu oynatabildiği veya duraklatabileceği şekilde video öğem için bir olay dinleyicisi ekledim. Video denetimlerini (ses kaydırıcısını değiştirmek gibi) tıklattığımda bile olayın tetiklendiğini fark ettim, ki bu açıkça benim niyetim değildi.

Bunun için nispeten basit bir çözüm var mı?

Answer 1

Video öğesinin onclick olayını, bir olay bağımsız değişkenini kabul eden bir işlevle işleyebilirsiniz. Bu olay argümanı, katmandaki X/Y konumu (video etiketi olmalıdır) dahil olmak üzere, fare tıklaması hakkında birçok veriyle doldurulacaktır. Bu, oynatma/duraklatma etkinliğinizi yalnızca tıkla, videonun belirli alanlarında. Alttaki 50 piksel hariç videonun her yerinde tıklamalarla ilgili işlem yaptığımız bir örnek ekledim. size aradığınız davranışını verir heightOfControls için güzel değer bulmak mümkün olmalıdır deneme biraz ile

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. 
    } 
}; 

.

Fiddle: Bu yardımcı olur http://jsfiddle.net/hTYck/4/

Umut!