Geek Answers Handbook

HTML5: Placing a canvas on a video with controls

I want to draw things on HTML5 video. For this, I am trying to place a canvas on an HTML5 video element.

But there is a problem, when I put the canvas on the video element, the video controls do not work. Because the canvas receives all mouse and click events. Is there a way to delegate events to video controls or to display controls elsewhere?

Any help / idea would be great.

+4
source share
3 answers

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

+2
source

You can capture click events on the canvas and calculate their position. Based on this, you can get closer to what control was targeted and make it video-modified. I mean something like this:

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

Increase the z-index of the canvas. z-index=10 Move the video under the canvas. Canvas height = height of the entire video - the height of the video controls.

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

0
source

More articles:


All Articles