HTML5 : 컨트롤이있는 비디오에 캔버스 놓기

Question

HTML5 비디오에 그림을 그려보고 싶습니다. 이를 위해 HTML5 동영상 요소에 캔버스를 배치하려고합니다.

그러나 비디오 컨트롤이 작동하지 않는 비디오 요소에 캔버스를 배치하면 문제가 발생합니다. 캔버스가 모든 마우스 오버 및 클릭 이벤트를 받기 때문에. 이벤트를 비디오 컨트롤에 위임하거나 컨트롤을 다른 곳에 표시 할 수 있습니까?

어떤 도움이나 아이디어라도 좋을 것입니다.

Answer 1

당신이
당신은이 질문에 대한 내 대답 읽을 수 있습니다 자신의 컨트롤을 구현 (예 : videojs으로 또는 설정 기존 사용)되어 수행해야합니다 아마도 Html5 video overlay architecture

Answer 2

캔버스에서 클릭 이벤트를 캡처하고 위치를 계산할 수 있습니다. 이를 바탕으로 어떤 컨트롤이 목표로 삼 았는지를 대략적으로 파악할 수 있으며 비디오가 스스로 변경되도록 할 수 있습니다.
나는 이런 식으로 뭔가 의미 :

canvas.onclick = function(e){ 
    if(isOverPauseBtn(e)) 
     video.pause(); 
    //.. and so on 
}