HTML5: Placing a canvas on a video with controls

问题:

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.

回答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

回答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
}

回答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