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.

Perhaps you want it the other way round: drawing the video on canvas and enhance it with fancy stuff and interaction there? — pimvdb, Sep 22 '11 at 08:01

score 2 · Answer 1 · answered Sep 22 '11 at 08:07

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
}

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

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

edited May 23 '17 at 12:12

Community

1
1

answered Sep 22 '11 at 08:33

Variant

16,901
4
38
65

score 1 · Answer 3 · answered Jan 17 '19 at 12:27

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

HTML5: Placing a canvas on a video with controls

3 Answers3

Linked