javascript - HTML5: Placing a canvas on a video with controls - Stack Overflow

admin管理员组

文章数量:1323707

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.

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.

• javascript
• html
• html5-video
• html5-canvas

Share Improve this question Follow edited Sep 22, 2011 at 8:01 pimvdb 155k8080 gold badges311311 silver badges356356 bronze badges asked Sep 22, 2011 at 7:46 mcadircimcadirci 18611 gold badge22 silver badges1212 bronze badges 1

• Perhaps you want it the other way round: drawing the video on canvas and enhance it with fancy stuff and interaction there? – pimvdb Commented Sep 22, 2011 at 8:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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

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
}

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

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.

本文标签： javascriptHTML5 Placing a canvas on a video with controlsStack Overflow