¿Cómo insertar un video en una página web?

A día de hoy, debido a la alta velocidad de transferencia de datos en internet, los videos ya son parte del diseño web. Es posible insertar un video en el HTML de tu web como si de un elemento más de imagen se tratara.

Es por eso que hoy te voy a comentar sobre cómo insertar video en página web, porque a pesar de que es sencillo podrías encontrarte problemas si no lo haces bien.

¿Con qué objetivo insertar un video en el HTML de tu web?

Lo primero que debes saber es por qué quieres un video en tu web. Ya que la respuesta te ayudará a decidir dónde almacenarlo. Generalmente hay dos razones:

1. Para mostrar mis videos: esta es la razón tradicional, donde el usuario reproduce de manera voluntaria el contenido.
2. Para que el video forme parte de la maquetación y el diseño: en este caso es donde el video es parte de la estética de tu sitio. Aquí sí, tienes que subir el video a tu servidor.

Si ya decidiste subir el audiovisual a un servidor propio debes tener en cuenta los siguientes puntos.

Formatos de video en tu web

Desde que surgió HTML5 en 2014 los navegadores tienen un reproductor de video incluido, así que es algo menos de lo que preocuparse. Pero sí depende de ti la edición y el formato final.

Lamentablemente, aún no se ha establecido un formato universal de video para todos los navegadores, aunque el más soportado es el MP4. Por lo que si quieres garantizar una buena experiencia de usuario tienes que utilizar videos de sustitución con formatos WEBM u OGG.

El código mínimo sobre cómo insertar video en página web sería:

 <video width=”X” height=”Y” controls>

 <source src=”movie1.mp4″ type=”video/mp4″>

<source src=”movie1.webm” type=”video/webm”>

 <source src=”movie1.ogg” type=”video/ogg”>

</video>

Sistema de codificación

Pero no solo influye el formato, también debes tener en cuenta la codificación de ese video. Lo más común es la combinación MP4 + codificación H264. De todas formas, es recomendable brindar la opción de sustitución con la versión WEBM.

Tamaño recomendado en videos de fondo

En este caso el tamaño sí que importa. La duda está entre escoger una relación de poca calidad y tamaño grande, o viceversa. Lo que te recomiendo es usar un video de menor tamaño, pero en buena calidad para garantizar que se vea bien en la mayoría de los casos.

Los expertos señalan que es mejor un video de poco tamaño y buena calidad, que de mayor tamaño y poca calidad. Ten en cuenta que los dispositivos móviles van a disminuir el tamaño del video para adaptarlo a su resolución de pantalla.

Peso del video

El peso influye en la calidad, pero en videos de la web importa más el tiempo de carga del contenido. Si el video es muy pesado, es mejor tener una sustitución (imagen o color de fondo) para que la primera impresión no sea muy negativa.

El tiempo debe ser el mínimo posible, por lo que debes comprimir el video y llevarlo al límite de las posibilidades. Ya sabes, el peso de la web se convierte en tiempo y el exceso de tiempo mella la experiencia de usuario.

Desventajas de usar tu propio servidor para insertar un video en el HTML de tu web

Por supuesto, almacenar los videos en tu propio servidor tiene algunos handicaps a tener en cuenta.

• Al subirlo a tu servidor es tu responsabilidad ofrecer diferentes formatos para garantizar la universalidad de su reproducción.
• La velocidad será inferior al de una plataforma de video profesional. Además, te resultará más difícil ofrecer al usuario la posibilidad de que cambie la calidad del video dependiendo de su velocidad de conexión.
• La estabilidad del servicio será menor y puedes presentar fallas que hagan caer tu sitio. Además de que te afectará el uso de ancho de banda en lo referente a megas en transferencia y almacenamiento. Por lo que si tu web es popular te puede traer una subida del precio del servidor por aumento del uso de ancho de banda.

¿Cómo insertar un video en una página web desde una plataforma externa?

En el caso que hayas decidido no guardar los videos en tu servidor, tienes la opción de alojarlos externamente. Esto podrás lograrlo utilizando un código de inserción desde la plataforma que escojas, sea Youtube u otra.

Este tipo de sistemas garantizan la compatibilidad del contenido con los navegadores más usados, lo que te asegura una correcta visualización en la mayoría de dispositivos. Con el alojamiento externo la carga no recae sobre tu servidor propio.

Sin embargo, debes informarte sobre las condiciones de uso, derechos de autor y privacidad de este tipo de plataformas. Incluyendo ajustar el código de inserción o embeded code, a tus necesidades.

Por ejemplo, si deseas insertar un video desde YouTube, solo tienes que encontrarlo o subirlo si es un video propio y solicitar el código de inserción. Observa la secuencia de pasos a seguir:

• Abres Youtube y buscas el video.
• Debajo del video, hay un botón para compartir. Lo clicamos.
• Aparece una ventana, con las distintas opciones para compartir. Una de ellas es la palabra Insertar. Si lo presionas, se despliega el video y a la derecha aparece un código parecido a este:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/eAaHcEzYdWw?start=73″ title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

• Configuramos los parámetros que deseamos y luego copiamos y pegamos en nuestro sitio web el código.

Esta es la opción más recomendada, sobre todo si no tienes un servidor profesional o muchos recursos. Ya que te permitirá visualizar el video en HD en cualquier dispositivo y no te ocupa espacio en el servidor. Además, es probable que Google lo tenga más en cuenta a la hora de posicionarlo, ya que Youtube pertenece a esta compañía.

Ahora que ya sabes cómo insertar un video en una página web HTML, te queda según lo que deseas elegir cuál de estas formas vas a utilizar para lograrlo.

Antes de despedirme te recomiendo que continúes leyendo otros artículos del blog Bigfoot Ecommerce porque tenemos temas igual de útiles e interesantes. Nos vemos en la próxima entrada.

¡Síguenos en Twitter!