5

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.

pimvdb
  • 151,816
  • 78
  • 307
  • 352
mcadirci
  • 186
  • 1
  • 2
  • 12
  • 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

4 Answers4

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
}
gion_13
  • 41,171
  • 10
  • 96
  • 108
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

Community
  • 1
  • 1
Variant
  • 17,279
  • 4
  • 40
  • 65
  • This seems like overkill. Even if the asker wants the canvas to stillbe able to receive events, it should still be possible to conditionally re-route events to the video element as they have wondered. – starball Oct 03 '22 at 07:02
1

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

Jai
  • 31
  • 3
0

If you don't need the canvas to receive any pointer events, then you can use the CSS pointer-events property on the canvas and set it to none.

starball
  • 20,030
  • 7
  • 43
  • 238