Vídeos en servidor propio con HTML5
Incrustar vídeos de YouTube en nuestra web es inicialmente sencillo. Pero, ¿sabéis que podéis incrustar vídeos alojados en servidor propio en vuestra web con HTML5 de forma fácil?
Sí, vamos a ver cómo poner un vídeo que tenemos alojado en nuestro servidor en nuestra web con unas simples etiquetas. Pero antes:
Servidor preparado para vídeos
Lo primero y más importante es saber si nuestro servidor soporta la reproducción de vídeos. Tened en cuenta que la mayoría de hostings, no lo soportan. Y me explico. Cuando contratas un hosting, te da unos límites: normalmente con un tráfico limitado al mes, una RAM muy limitada….
Estas limitaciones, hacen que por ejemplo con una RAM limitada, sólo puedan ver el vídeo simultáneamente 3 usuarios. O que como tienes 1TB de tráfico mensual como límite, a las 100 visualizaciones consumas ese tráfico y te paren la web.
Por eso, la mayoría de usuarios, lo que hacen es alojar el vídeo en YouTube o Vimeo, e incrustarlo en la web.
Preparamos los vídeos en servidor propio
Si tenemos un servidor en el que estamos seguros que podemos alojar los vídeos, tenemos que tener en cuenta lo siguiente si queremos utilizar el reproductor que HTML5 facilita:
Si queremos que sea visible en todos los navegadores, debemos tener 3 formatos de cada uno de los vídeos: MP4, WebM, and Ogg. Cada navegador es compatible con diferentes formatos.
¿Comenzáis a entender porque todo el mundo opta por servicios como YouTUbe o Vimeo?
Insertar vídeo en web con HTML5
Aquí tenemos las etiquetas para insertar el vídeo en la web. Antes, recuerdo que debemos tener en cuenta que HTML5 soporta los siguientes formatos: MP4, WebM, and Ogg.
<video width="640" height="480" controls> <source src="./misvideos/mipelicula.mp4" type="video/mp4"> <source src="./misvideos/mipelicula.ogg" type="video/ogg"> Su navegador no soporta el visionado de vídeos. Actualícelo. </video>
Si os fijáis, pongo dos vídeos. HTML5 irá uno a uno y reproducirá el primero que reconozca el formato. No significa que reproduzca los dos, uno después de otro. Lo que le estamos diciendo es que tiene esas dos opciones y que reproduzca el que reconozca. Según el navegador, soporta un formato u otro. Como tenemos que hacer que se reproduzca en todos, le ponemos todas las opciones del video en diferentes formatos.
Por ejemplo, Chrome y Firefox reproducen los tres formatos. Safari, Webm no lo reproduce. Internet explorer sólo reproduce .mp4
Atributos de objeto Video en HTML5
src – Dirección donde se aloja el vídeo
poster – Url de la imagen que se muestra antes de reproducir el video
preload (none, metadata, auto) – Para hacer buffering antes de reproducir. Le indicamos si queremos que se cargue aunque no le den al play o no.
autoplay – Para que se auto-reproduzca el video
loop – Que se reproduzca infinitamente
muted – Que por defecto no se reproduzca el audio
controls – Que se muestre los botones del reproductor (Play, Stop, Pause…)
width – El ancho del video en pixels
height – El alto del video en pixels
Un ejemplo sería:
<video width="640" height="480" controls autoplay loop> <source src="./misvideos/mipelicula.mp4" type="video/mp4"> <source src="./misvideos/mipelicula.ogg" type="video/ogg"> Su navegador no soporta el visionado de vídeos. Actualícelo. </video>
Espero que os sea de utilidad este artículo donde mostramos cómo poner vídeos en servidor propio con HTML5.
Más información