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.
source share