svg video

Estructura de un svg basico con video

svg video A la hora de insentar videos y hacer diseño paginas web me he decantado por utilizar el formato de dibujo vectorial svg.

Aunque este formato fue diseñado hace años como formato de dibujo vectorial, se ha modificado para poder insertar dentro del codigo xml videos, audio, imágenes, texto, css incluida animaciones, y javascript.

Vamos una joya si no fuera porque da problemas en varios exploradores . Esperemos que vallan solucionando los problemas de compatibilidad

Así pues con un mismo archivo, sin librerías externas ni archivos externos, podemos generar “cualquier tipo de animación “ con estos objetos ¡ increíble!

Muchos problemas que he tenido, se hubieran solucionado más rápidamente si hubiera utilizado una herramienta online de validación de textos svg o si hubiera probado previamente en varios exploradores el resultado final

MI consejo utilizarlos y explorar https://validator.w3.org/

Vallamos por partes como dijo jack el destripador

<svg class="img-responsive" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0" y="0"
 width="500" height="320"
 viewBox="0 0 500 320">	
<rect width="500" height="320" stroke="blue" stroke-width="4px" fill="yellow"></rect>
	
</svg>	

Aquí podremos verla estructura básica de un grafico svg donde podemos ver:

 la cabecera necesaria para su visualización en las páginas web unas coordenadas x e y donde se ubica el svg dentro del contenedor que lo contenga,

Ancho y alto del gráfico svg

La propiedad viewbox es una especie de zoom de lo que vemos dentro del svg y modifica el tamaño del contenido del svg

Se ha colocado un rectángulo  dentro del  grafico svg para visualizar lo que sería el fondo de este grafico

Ahora colocaremos dentro de nuestro grafico un video

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

<rect width="500" height="320" stroke="blue" stroke-width="4px" fill="yellow"></rect>

<foreignObject width="480" height="300"  >  
  
<video  width="480" height="300" autoplay="autoplay" loop="loop" muted="muted"  preload="auto"  >
<source src="https://animacionesweb.online/videos/Spaceship-33411g.mp4" type="video/mp4"></source>
</video>

 </foreignObject>


</svg>	

La etiqueta foreignObject es como si fuera un contenedor dentro del grafico svg, para que el código svg pueda entender que allí tiene un video o cualquier objeto html.

Cuando escribimos en html5 el código de un video directamene en la pagina web la etiqueta «foreignObject» no se pone.

Este contenedor debe llevar una medida de ancho y alto que normalmente debería coincidir con el espacio que queremos que ocupe el video

Background video

background video css

Background video o videos de fondo para páginas web: Vamos a complicar un poco el código web para generar una película de fondo, un film encima de otro. esto nos puede ir muy bien para creacion de paginas web

Para empezar generaremos un svg  básico con los dos videos superpuestos, sugiero la lectura de blog anteriores donde espico como se realiza esto.

Lógicamente  al film superior debemos darle algún tipo de transparencia porque si no el video posterior de la pagina web no se veria, esto lo lograremos dando algún un grado de opacidad con css y colocando al fondo un video o background video

Como hemos comentado alguna vez ,dentro del svg podemos meter directamente propiedades css sin tener que ponerlas en un archivo externo

<style type="text/css">	
		#segundovideo{
			opacity: 0.5;
			 transform: scale(2.);
		}
	</style>

Como se ve en el código web la forma de incrustar propiedades css  dentro del grafico svg se realiza con la etiqueta de entrada y cierre “style” y dentro de ella podemos colocar cualquier tipo de propiedad css .

Como en cualquier propiedad css podemos llamar a nuestro objeto ya sea por el nombre de su clase como por su indicador. En este caso se ha generado la propiedad de opacidad que repercute sobre la transparencia de video superior y se ha aumentado el tamaño del video  con la propiedad “trasform” para poderlo escalar y quede todo proporcionado al tamaño del svg

<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">	
	#segundovideo{	
		opacity: 0.5;	
		 transform: scale(2.);	
	           }	
</style>

  <foreignObject  width="500" height="300"> 
      <video  autoplay="autoplay" loop="loop"   muted="muted"  preload="auto"     width="500" height="300"  class="a491h"  >   		
          <source src="https://animacionesweb.online/videos/Spaceship-33411g.mp4" type="video/mp4"/>           </video>	
  </foreignObject>	

 <foreignObject id="segundovideo" width="500" height="300"  x="0" y="0" >   
      <video  autoplay="autoplay" loop="loop"   muted="muted"  preload="auto"       width="500" height="300" class="a491h"  >     
         <source src="https://animacionesweb.online/videos/Nebula-6044s.mp4" type="video/mp4"/>      
     </video> 
</foreignObject>	
</svg>

En este blog hemos puesto el código de lo que sería dos videos dentro de un gráfico svg uno encima del otro al que a video superior le hemos generado una clase css de transparencia y todo ello en un solo archivo svg sin ningún tipo de archivo externo, esto nos da una gran ventaja de independencia a la hora de del desarrollo web con videos al no depender de ningún plugin ni framework externo, cualquier duda del código no te lo plantees y dímelo en los comentarios estaré muy agradecido

un saludo

Videos animados

Hacer videos animados

Videos animados :Vamos a la parte interesante de esta página, que no es otro cometido que la creación un video animado dentro de una página web.

Como hemos visto en blog anteriores los cuales recomiendo para no perderte el hilo de lo que son animaciones de videos dentro de un archivo svg (gráficos vectoriales ) donde te he explicado que es un archivo svg y como se puede añadir videos dentro de el para después manipularlos con código svg

Recordamos que dentro del grafico svg se puede colocar script de java script y estilos css Pues bien con los estilos de css podemos crear innumerables animaciones sobre cualquier objeto que tengamos el svg ya sea texto, imágenes, gráficos vectoriales o como en este caso videos para crear espectaculares animaciones con solo referirnos a su identificador

En este ejemplo vamos a crear un grafico svg simple, allí colocaremos un video frontal ( el primer video que se ve) y le colocaremos una clase  css de opacidad para que el video se vea transparente y muestre lo que hay detrás de el.

En este caso colocaremos otro video detrás y sobre este le añadiremos una animación web con código css por la que lograremos que el video gire 180 grados sobre su eje y mientras tiene otro encima de el,

Lógicamente este es un ejemplo muy malo de diseño web, estoy seguro que tu como diseñadora web de páginas sabréis sacarle el máximo partido a esta forma de trabajar  a la hora de animar videos web

Sugiero que mientras vais trabajando en vuestros diseños web veáis la compatibilidad con otros navegadores, y si queréis ahorraros código podéis probar mi herramienta online

https://animacionesweb.online que es con o que se ha hecho todos estos ejemplos de animaciones web

<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">
	#segundovideo{
                  opacity: 0.5;
                     }
       .primervideo{
            animation-play-state:running;animation-duration: 2s;animation-iteration-count: infinite;animation-name:rotacionvideo;
                 }
                 @keyframes rotacionvideo
{
  from {transform: rotateY(0deg);}
  to {transform: rotateY(180deg);}
  }
</style>



    <foreignObject  width="500" height="300"> 
       <video  autoplay="autoplay" loop="loop" class="primervideo"  muted="muted"  preload="auto"       width="500" height="300"   >   		
         <source src="https://animacionesweb.online/videos/City-3134.mp4" type="video/mp4"/>    </video>	
   </foreignObject>	


   <foreignObject id="segundovideo" width="500" height="300"  x="0" y="0" >    <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> 
   </foreignObject>	


</svg>

Espero que este bog y en los anteriores os sirva para algo, si es así agradecería cualquier tipo de comentario

Muchas gracias por vuestra atención un saludo

No dudéis en hacer preguntas 

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

Insertar videos

Insertar videos: A la hora de crear una página  web  de futuro como diseñadores web tenemos que tener en cuenta que cada vez más los ordenadores son mas potentes y la velocidad de la red también lo es, eso nos da pie a poder realizar animaciones web con videos , que sean animados con código java script y crear autenticas locuras de programación fácilmente

Desde nuestra página web online de animaciones web  podemos hacer animaciones  con videos e incrustar el código en vuestras páginas web totalmente gratis , con solo copiar y pegar

En este blog voy a intentar explicar el código necesario para colocar una animación de un videos en nuestra página web de código abierto   y  crear una animaciones de videos  en una página web de WordPress ( que nos soy ningún experto en el tema pero lo intentaremos)

Quiero avisar que este blog puede ser un poco pesado y recomendaría empezar el estudio de gráficos svg con nuestro blog más simple

Aquí vamos a dividir en varias secciones para ir poco a poco de como seria hacer una Animaciónes con varios videos desde cero

insertar videos youtube en wordpress

Insertar videos Youtube en nuestro blog o en cualquier pagina o entrada de WordPress es muy sencillo , solo debes copiar y pegar la url del video  directamente en la posición donde deseemos que se coloque el video , y WordPress se encarga de colocar tu video y el código necesario para ser visualizado correctamente , asi de sencillo ,

video de nuestro canal de ejemplos de animaciones web en solo 2 minutos

Ahora veremos como subir un video a una pagina web veremos cómo insertar un video con código en cualquier pagina web, es fundamental ir viendo como es el código fuerte de inserción de video pues luego se irá complicando a la hora de realizar animaciones web con videos dentro de cualquier pagina web incluido WordPress

Insertar un video en una pagina web

Voy a intentar explicar muy sencillamente como colocar un film en una página web y crear una animación video con el.

Al intentar hacer animaciones web con videos en mi pagina web https://animacionesweb.online me ha dado verdaderos quebraderos de cabeza al encontrarme con las diferentes interpretaciones que hacen los exploradores sobre la colocación de videos en una página web con un mismo código

Como ejemplo voy a insertar un video con html5 , en este caso voy a colocar un formato .mp4, hay muchas páginas verdaderamente trabajadas con temario de los formatos de vídeos y de los códec de video , pero este, no pretende ser el objetivo , nos vamos a centrar solo en las animaciones de un video dentro de la pagina web

Primero colocar un video en una página web con este codigo

<video width="300" height="300" controls loop >		
<source src="https://animacionesweb.online/videos/Spaceship-33411g.mp4" type="video/mp4"/>
</video>

Tenemos las medidas de la etiqueta video que nos indica que trozo de tu video debe representarse, El video se escalara proporcionalmente hasta esa medidas, si no colocas medias seguramente el video aparecerá cortado.

En algunos exploradores para que el video comience automáticamente hay que poner la etiqueta de sin sonido muted=»muted» preload=»auto»

Dependiendo del explorador si clic con el botón derecho nos dará varias opciones sobre el video

En principio el código es bastante comprensible si bien adaptar el video a un determinado tamaño o quitar las franjas negras que aparecen en el video puede causar problemas

Lo más sencillo es tratar el video con un programa de edición de videos para quitarle peso al video y adaptarlo a las medidas reales del espacio de la pagina web sin los desagradables márgenes, si no, nos tocara modificar el tamaño del video con css ampliando las coordenadas del tamaño de video htm5.

un saludo y gracias por vuestros comentarios al realizar vuestros Animacion video