Html5 Video Overlay Architecture

I want to create an html5 page with video and image overlay, which means some image that appears above the video. In some cases, this overlay time will also be text. Is there a good way to achieve this?

What I have tried so far is to use the <video> to store the video and draw an image on the canvas that I place on top of the video. To show this, I need to move the z-index setting of the video back to -1, but then the video controls will not work. There may be a solution to get the controls working again, but I'm not sure I'm on the right track here. I guess this is the recommended solution. Perhaps with the help of the canvas, which I fill in both the video and the overlay. Or something completely different?

Note. I edited the question as it initially pointed in the wrong direction as to what is important here. I would like to have a solution that does this work without problems in full screen mode and in everything, but the focus is on: What is the appropriate way to place elements on top of the video - in html5?

+1
source share
1 answer

Achieving what you want and which it supports in full-screen mode is problematic. Full-screen support in html5 video is optional and is not accessible to the API in any way ( See Discussion here ). Even if you used the built-in full-screen mode, you cannot add content above it unless you want to change the video file itself on the server at run time.

what you can do (and what I did in such a case) is to implement your own video controls, run the video tag without the built-in controls, and have fun superimposing as many layers on top of your video as possible is now out of focus.

As for full screen mode, you can implement some kind of custom background full screen mode similar to what was done here

edit . A problem that occurs when placing a canvas over a video blocks the built-in html video controls. My suggestion is to implement your own video controls (play, pause, volume, crawler, etc.) using html and javascript calling the video API. Perhaps you can even make it more beautiful than the ugly built-in controls. Your controls can be contained in a layer above the overlay canvas, and thus a video will be shown, an inscription above it and above it your control set.

You can read a little about implementing your own controls here or here. And yet it can be much better than that.

+7
source

All Articles