INICIO Nosotros Crea animaciones online
PAGINA PRINCIPAL

Hacer videos animados

Animaciones de videos en diversos exploradores

Insertar un video en una pagina web

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

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

Ojo con el tipo de comillas que poneis, no siempre copiar y pegar da buen resultado ;)

tambien se ha dado el caso de problemas al cerrar la etiqueta "sourde" al trasformarlo a archivos SVG luego lo vemos

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

Estructura de un svg basico con video

A la hora de insentar videos y hacer animaciones para 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/

 <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">	
	<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>

En amarillo Observamos el ancho y el alto de lo que mide el grafico svg (de allí no va a salir nada) lo hemos representado con un rectángulo de esas medidas

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

Luego 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

Background video css

Como hemos comentado dentro del svg podemos meter directamente propiedades css sin tener que ponerlas en un archivo externo, por lo que solo refiriéndonos a su “id” podemos poner todas las modificaciones css que necesitemos , en este caso llamamos a la propiedad opacidad en el segundo 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">

<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>

Crear animaciones con videos

Vamos a la parte chula de esta página que no es otro cometido que la creación de videos animados dentro de una página web.

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

En este caso vamos a crear un video de fondo que le vamos ha realizar una animación de rotación Crearemos una imagen encima de este video con una pequeña animación de desplazamiento, y otro video encima con la opacidad que antes hemos realizado anteriormente

Lo primero es obtener a quien se le va hacer la animación de rotación para ello cogemos el nombre de la clase de del primer video, en nuestro ejemplo “primervideo” que actúa sobre la etiqueta”video” y le realizamos una animación “front –to ” marcando los movimientos de inicio y final del video en este caso rótate sobre el eje y de 180 grados.

<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.1;}
.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>

Animaciones web video e imagenes

Desde nuestra pagina web https://animacionesweb.online intentamos realizar animaciones web y 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 animacion de imagenes online

	<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>