Miroir en jouant la vidéo en arrière-plan sans double tampon?

Mon site Web montre une vidéo, c’est en quelque sorte l’essentiel. Je me demande si je peux utiliser la même vidéo, de préférence sans la charger deux fois, et l’utiliser comme arrière-plan (avec éventuellement un effet de flou) sur le rest du site?

_________________ |  | | _____ | |  | | | | Same  

Je sais que cela est ridiculement mal expliqué, mais je ne sais pas par où commencer. J’ai pensé que jQuery ressemblait à un tag approprié, mais je n’en suis même pas sûr. Je sais que l’on pourrait normalement relier ce qu’ils ont essayé, mais je ne sais pas par où commencer. Comme je l’ai dit, je préférerais beaucoup ne pas avoir à le tamponner deux fois, ce qui signifie dans mon monde ne pas append un autre élément , mais utiliser une sorte de js pour le refléter d’une manière ou d’une autre. Un plugin, peut-être?

Toute forme d’orientation serait très appréciée, merci d’avance.

Vous pouvez utiliser l’événement timeupdate de la video pour dessiner une image de la video dans l’élément canvas aide de drawImage() ; utilisez css vw , vh values ​​pour définir le canvas sur la fenêtre principale, définissez position absolute sur les éléments video et canvas , filter propriété avec blur() afin de définir l’effet flou du canvas , définissez z-Index of canvas à une valeur inférieure z-Index de l’élément video .

 body { width: 94vw; height: 100vw; } video { position: absolute; z-Index: 1; left: 25vw; } canvas { width: 94vw; height: 100vh; position: absolute; z-Index: 0; -webkit-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); }