HTML5 비디오 - 클릭의 위치

Question

좋아, 사용자가 비디오의 특정 영역을 클릭 할 수 있도록하려면 x는

난 ... 순수 자바 스크립트가 아닌 jQuery로, 그렇지 않으면 아무 일도 발생하지 않습니다, 발생 도착했습니다 :

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

나는 그들이, 적절한 시간과 적절한 위치에 을 클릭하면 변경 같은 비디오의 SRC를 할 의도 일 있어요하지만 난 HTML5 비디오에 위치 클릭에 아무것도 찾을 수 없습니다 요소. 아직 가능합니까?

나는 또한 커스터마이징 된 버튼을 사용하고 있습니다.

미리 감사드립니다.

Answer 1

이를 사용해보십시오 : 된 MouseEvent (예) .clientX와 clientY로는 X를주고 Y 계정으로 스크롤하지 않고도 창에 마우스 상대 좌표 것을

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(); 
} 

참고. 이 문제를 해결하려면 window.pageXOffset 및 window.pageYOffset을 추가해야합니다. 그러나 window.pageXOffset 및 window.pageYOffset은 이전 버전의 IE에서는 지원되지 않습니다. e.preventDefault()는 동영상을 클릭하면 일시 중지되는 것을 방지합니다.