어떤 작업도 실행하지 않는 클릭 만 감지하면됩니다. 아래 예를 참조하십시오.
<video id="video" width="320" height="240" src="http://vjs.zencdn.net/v/oceans.mp4" controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
var video = document.getElementById("video");
video.onclick = function(){
alert("This click is useless");
};
이 경우 사용자가 비디오를 클릭하면 경고 메시지가 표시됩니다. 그러나 문제는 사용자가 재생 버튼, 일시 중지 버튼 또는 볼륨 제어를 클릭 할 때 경고 메시지가 표시되지 않도록하는 것입니다. 사용자가 버튼을 클릭하지 않고 동영상을 클릭 할 때만 표시되기를 원합니다. 또한 그 후에 팝업 창을 열어야하므로 브라우저가 팝업을 차단하지 않도록 setTimeout 등을 사용할 수 없습니다.
좌표를 읽고 버튼이 있는지 여부를 계산할 수 있다는 것을 알고 있지만 다른 솔루션을 선호합니다.
이 질문과 매우 유사한 질문을했습니다. ( Firefox에서 HTML5 비디오 컨트롤을 클릭 할 때 이벤트 버블 링을 방지하는 방법 )
다른 브라우저에서 일관되게 수행하는 유일한 방법은 비디오 위에 오버레이를 설정 한 다음 해당 오버레이에 대한 사용자 지정 컨트롤을 사용하는 것입니다. 그 이유는 여러 가지가 있습니다. 예를 들어 '쓸모없는'클릭은 브라우저에 따라 다릅니다.
하지만 Firefox에 대해 신경 쓰지 않는다면이 예제는 Chrome, Safari 및 IE에서만 작동합니다. http://jsfiddle.net/me2loveit2/cSTGM/40/
<a href="javascript: alert('Nothing');">
<video ...
</video>
</a>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다