How to make a changing video background?

Question

css

Good day dear friends/colleagues/comrades!
A novice typesetter worries you!
The fact is that just learning html css js jquery is not very fun, I wanted to create my own website project based on my imagination. So. I have a site header (let's call it header or main page). I made a video background in my header. But the fact is that I would like it even cooler, so that when one vidos ends, the second one begins. I did not find how to implement this. I would also like to make one vidos at the end smoothly disappear (fade out) and then the second vidos smoothly appear (fade out). I also didn’t find how to implement this. I apologize in advance if my question seems strange, stupid or even offensive! I have only recently begun to delve into your kitchen, and my hands are already itching to do something suitable! I climbed a lot of things, but I didn’t find anything suitable. Thank you all

Answer 1

1. What is the problem of making one long video out of two with your beautiful transition? Or do you need to pervert?
2. Make N boxes on top of each other (via position: absolute and z-index ). Each block has its own video. When the first video ends smoothly animate this layer at opacity: 0 (in jq this is done through .hide() ), and the next one at opacity: 1 (in jq .show() )
3. Want to be cool? Do it via canvas(pixi.js) . Make the transition through a displacement map

Answer 2

Thank you! About the video, for some reason I did not think! Well, about "cool" so it's purely for yourself) do not show off for the sake of)