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); }