HTML5: Placing a canvas on a video with controls

Question

I want to draw things on HTML5 video. For that I am trying to place a canvas on the HTML5 video element.

But there is a problem when I place the canvas on the video element the video controls do not work. Since canvas getting all the mouseover and click events. Is there a way to delegate the events to video controls or show the controls in somewhere else?

Any help/idea would be great.

Answer 1

What you should do is implement your own controls (or use an existing set such as videojs)
You can read my answer to this question: Html5 video overlay architecture

Answer 2

You can capture the click events in the canvas and calculate their position. Based on that, you could approximate which control was targeted and make the video changes your self.
I mean something like this :

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

Answer 3

Increase the z-index of canvas. z-index=10 Bring the video under the canvas. Height of canvas = height of entire video - height of video controls.

You can cover only the video part with canvas and if hover on the bottom of the canvas, you will get the controls