HTML5: Placing a canvas on a video with controls

Issue

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.

Solution

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

Answered By - Variant