Animaciones con video

svg video

Desde nuestra pagina web https://animacionesweb.online intentamos realizar animaciones web y diseño web dentro de estas un tema obligatorio es el manejo de video e imágenes en movimiento creando espectaculares animaciones web,

Luego podrás descargarlas en formato svg en un archivo independiente sin ningún tipo de librerías ni plugin ni nada por el estilo solo código para copiar y pegar,

Pero como hemos comentado antes, la interpretación de los exploradores al hacerlas animaciones web , hace difícil el cometido , donde una animación se ve genial, en otro necesita mucho mas código

En el cometido de inrertar una imagen encima de un video y animarlo es un ejemplo en animaciones html5 Y de las combinaciones que he tenido que realizar para que este pudiera ver tanto en firefox como en chrome asi como en el archivo externo svg

Aquí dejo el código de la animación que es un simple ejemplo de lo que se puede realizar en animaciones web,

Si quieres ver mas ejemplos ves a nuestra página principal y veras muchas animaciones web ,y si tienes alguna duda ponte en contacto conmigo a través de mi correo

<svg class="img-responsive" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="300" viewBox="0 0 500 300">		
  <style type="text/css"> 
.primervideocompleto{  animation-play-state:running;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name:rotacionvideocompleto;    }
  @keyframes rotacionvideocompleto{
			  from {transform: rotateY(0deg);}
			  to {transform: rotateY(180deg);}}

 #segundovideocompleto{opacity: 0.3;}
 
	 .imagencompleto{
                 animation-duration:8s;
                 animation-iteration-count: infinite;
                 animation-play-state:running;
                 animation-name:animacionsegundovideocompleto;
	          z-index:0 ;
                       }
                  @keyframes animacionsegundovideocompleto  {
                           0.1% {transform:translate(0px, 0px)}
                           100% {transform:	translate(500px, 400px) }
                                                       } 
                #b490	foreignObject{
        position:absolute; z-index:-1;}	  
	  </style>  
<g id="b490">


 <foreignObject  width="500" height="300"> 
    <g xmlns="http://www.w3.org/1999/xhtml">
       <video  autoplay="autoplay" loop="loop" class="primervideocompleto"  muted="muted"  preload="auto"     width="500" height="300">    
           <source src="https://animacionesweb.online/videos/City-3134.mp4" type="video/mp4"/>       </video>      
    </g>  
     </foreignObject> 
        </g>  



<image   xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/Sin-título-2.png" 
class="imagencompleto" width="300" height="300" x="0" y="0" ></image> 
 
  <foreignObject id="segundovideocompleto" width="500" height="300"  x="0" y="0" > 
 <g xmlns="http://www.w3.org/1999/xhtml"> 
    <video  autoplay="autoplay" loop="loop"   muted="muted"  preload="auto"       width="500"   height="300" class="a491h"  >
      <source src="https://animacionesweb.online/videos/Reflection-27594.mp4" type="video/mp4"/>   </video> 
  </g>  
    </foreignObject> 

 </svg> 

Vamos a ir disgregando el código de programación de la animación de video

<svg class="img-responsive" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="300" viewBox="0 0 500 300">	

Aquí podemos ver la cabecera de un grafico svg y medidas de lo que ocupara externamente el grafico svg y el zoom que llevara el contenido del interior

<style type="text/css"> 
.primervideocompleto{  animation-play-state:running;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name:rotacionvideocompleto;    }
  @keyframes rotacionvideocompleto{
			  from {transform: rotateY(0deg);}
			  to {transform: rotateY(180deg);}}

 #segundovideocompleto{opacity: 0.3;}
 
	 .imagencompleto{
                 animation-duration:8s;
                 animation-iteration-count: infinite;
                 animation-play-state:running;
                 animation-name:animacionsegundovideocompleto;
	          z-index:0 ;
                       }
                  @keyframes animacionsegundovideocompleto  {
                           0.1% {transform:translate(0px, 0px)}
                           100% {transform:	translate(500px, 400px) }
                                                       } 
                #b490	foreignObject{
        position:absolute; z-index:-1;}	  
	  </style>  

Dentro del svg podemos agregar código css totalmente independiente de tu hoja de estilos haciendo que el gráfico svg sea totalmente independiente

Dentro de código css podremos observar una animación  del primer video

Un opacidad del segundo video del que esta encima

Y otra animación de una imagen

También podemos ver la clase de la propiedad foreignObject que hace compatibles con otros navegadores la animación de videos web

Ya solo nos queda los videos que hemos agregado al código y la imagen todo agrupados con una tetiqueta”g”

Hemos creado un archivo svg donde colocar un video encima de otro y quitarle opacidad a uno de esos videos con css , hemos animado un video dentro del grafico svg e insertado una imagen que  también le hemos dado movimiento, lo dicho muy denso , quizás deberíamos haberlo hecho más pausadamente este tema  se puede modificar déjame tus comentarios y adaptaremos a tu necesidades

Un saludo

Deja un comentario