Desde el inicio del Internet y la aparición de las páginas web, el contenido multimedia ha sido vital para llevar la información, donde este contenido puede ser imágenes, audio, vídeo, imágenes animadas, etc. De todos los formatos la imagen es el más accesible, ya que con poco peso puede llevar la representación de un momento específico con una gran claridad pero esta ventaja también es su desventaja, ya que una imagen sola puede ser sacada de contexto o no nos da el panorama completo.
Es aquí donde aparece el video, con este formato podemos ver una escena completa y aunque también puede sacarse de contexto, su capacidad de mostrarnos más información es muy importante, por supuesto esto conlleva que el peso del contenido es mayor por lo que no todo el contenido multimedia en una web puede ser video.
HTML5 trajo varias mejoras al momento de incluir videos en una página web, ya que nos permite crear contenedores de forma nativa y con ello evitamos el uso de tecnologías externas como Flash o RealTime, quienes en su momento dominaron el contenido de este estilo en Internet.
Uno de los aspectos más importantes que debemos saber es el formato del video que queremos reproducir, esto se debe a que el video necesita compresión además de decodificación, de forma que podamos ver y escuchar su contenido de forma adecuada, para ello los navegadores deben incluir los codecs que son las diferentes librerías y herramientas que les permiten realizar el proceso.
La elección del formato a veces no es nuestra decisión ya que puede ser un cliente el que nos suministró el video, sin embargo debemos asegurarnos que esté en alguno de estos formatos al menos para que pueda ser compatible con la mayoría de los navegadores.
Ya sabiendo esto es hora de poner manos a la obra, vamos a crear una pequeña página donde mostraremos un video, para ello debemos tener dicho video en alguno de los formatos mencionados anteriormente, si no lo poseemos podemos buscar alguna aplicación de conversión, hay muchas opciones de software libre que nos permiten llevar nuestro video al formato que necesitamos.
La etiqueta HTML5 que vamos a utilizar tiene un nombre muy intuitivo y es <video> al encontrar esta etiqueta ya el navegador sabe lo que debe hacer con el contenido, es muy similar a la etiqueta <img> que muchos conocemos.
Tiene dos propiedades clave, src que es la ruta desde donde vamos a cargar el video, y type en donde indicaremos el tipo del formato del video que el navegador debe reproducir. Un ejemplo de la aplicación de esta etiqueta puede ser:
![html-video-responsive.jpg]()
Como vimos el video se muestra en nuestro navegador de forma adecuada y sin necesidad de incluir algún complemento adicional como se hacía en el pasado.
Si tomamos el ejemplo anterior y redimensionamos nuestra página web veremos que el video puede salirse de nuestro navegador, esto es porque no le hemos dicho al contenedor que debe actuar de forma responsive. Veamos como si redimensionamos antes de realizar los ajustes:
Notamos entonces que el video se corta, lo que nos puede causar un pequeño problema si estamos haciendo una página web con una versión para móviles. Para corregir el problema que hemos detectado con el código del ejemplo anterior debemos incorporar algo de estilos CSS3 en nuestro código, para ello dentro de la etiqueta <head> vamos a incorporar lo siguiente:
En esta oportunidad si notamos que el video aparece de forma completa en nuestra pantalla a pesar de que la resolución de la misma es menor a la que posee el video que deseamos mostrar, con esto hemos logrado nuestro primer contenedor de video responsive.
Aunque el soporte de video a través de HTML5 es casi un estándar mundial, hay ocasiones en las que los clientes no tienen un navegador capaz de reproducir nuestro contenido, por lo que debemos tener en cuenta que para una experiencia de usuario totalmente satisfactoria tal vez necesitemos utilizar algún tipo de complemento adicional.
Otro uso muy popular de los videos es incluir el contenido de sitios como YouTube o Vimeo, estos casos son especiales ya que el contenido normalmente lo obtenemos a través de elementos <iframe>, por lo que existen complementos en JavaScript que nos permiten añadir el responsive de una manera más fácil que tener que construir un set de reglas por nuestra cuenta.
Generalmente esta tendencia se asocia a plugins jQuery en una combinación con frameworks como Bootstrap o Foundation, pero ya queda de parte de cada quien utilizar los complementos que le hagan falta según la misión de su aplicación web.
Con esto finalizamos este tutorial, donde hemos hecho una inclusión de video en nuestra página web y aplicando el diseño responsive sin mayor complicación, es importante que tomemos en cuenta los servicios externos que hacen de host de videos, ya que el contenido de este tipo tiene un peso considerable y puede afectar nuestro ancho de banda por lo que las técnicas que describimos aquí puede que no sean muy útiles en un ambiente donde el espacio sea reducido. Sin embargo el saber mostrar la información correctamente nos ayudará a crear experiencias de usuario más completas y por lo tanto nuestras páginas serán valoradas de la manera adecuada.
Es aquí donde aparece el video, con este formato podemos ver una escena completa y aunque también puede sacarse de contexto, su capacidad de mostrarnos más información es muy importante, por supuesto esto conlleva que el peso del contenido es mayor por lo que no todo el contenido multimedia en una web puede ser video.
HTML5 trajo varias mejoras al momento de incluir videos en una página web, ya que nos permite crear contenedores de forma nativa y con ello evitamos el uso de tecnologías externas como Flash o RealTime, quienes en su momento dominaron el contenido de este estilo en Internet.
Requisitos
Los requisitos para llevar a cabo este tutorial son bastantes bajos a nivel técnico, con un editor de textos, permisos para crear archivos y un navegador moderno con soporte para HTML5 y CSS3 nos basta. En cuanto al contenido necesitamos al menos un video en nuestro ambiente de pruebas de forma que podamos ver el funcionamiento de los ejemplos de forma adecuada al momento de seguir el tutorial.
El formato
Uno de los aspectos más importantes que debemos saber es el formato del video que queremos reproducir, esto se debe a que el video necesita compresión además de decodificación, de forma que podamos ver y escuchar su contenido de forma adecuada, para ello los navegadores deben incluir los codecs que son las diferentes librerías y herramientas que les permiten realizar el proceso.
Mp4 y WebM
En la actualidad para web existen dos formatos, uno muy popular que es el Mp4, este formato es soportado por la mayoría de los navegadores móviles y de escritorio por lo que es un buen formato para nuestros videos. El otro formato es WebM, es un poco más nuevo que el Mp4 pero no es tan popular, también es soportado por la mayoría de los navegadores, sin embargo no es tan común.
La elección del formato a veces no es nuestra decisión ya que puede ser un cliente el que nos suministró el video, sin embargo debemos asegurarnos que esté en alguno de estos formatos al menos para que pueda ser compatible con la mayoría de los navegadores.
Incluir nuestro primer video
Ya sabiendo esto es hora de poner manos a la obra, vamos a crear una pequeña página donde mostraremos un video, para ello debemos tener dicho video en alguno de los formatos mencionados anteriormente, si no lo poseemos podemos buscar alguna aplicación de conversión, hay muchas opciones de software libre que nos permiten llevar nuestro video al formato que necesitamos.
La etiqueta HTML5 que vamos a utilizar tiene un nombre muy intuitivo y es <video> al encontrar esta etiqueta ya el navegador sabe lo que debe hacer con el contenido, es muy similar a la etiqueta <img> que muchos conocemos.
Tiene dos propiedades clave, src que es la ruta desde donde vamos a cargar el video, y type en donde indicaremos el tipo del formato del video que el navegador debe reproducir. Un ejemplo de la aplicación de esta etiqueta puede ser:
<video controls> <source src=”rutavideo” type=”video/formato”> </video>Cómo vemos es un poco más extensa que la etiqueta img pero la causa es que es un poco más complejo mostrar un video que una imagen. Veamos a continuación un código donde vamos a mostrar un video en nuestro navegador, en esta etapa solo vamos a concentrarnos en que se pueda reproducir el contenido. Veamos el código completo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Nuestro primer video</title>
</head>
<body>
<video controls>
<source src="videoHTML5.mp4" type="video/mp4">
</video>
</body>
</html>Si ejecutamos el ejemplo en nuestro navegador debemos obtener lo siguiente:
Como vimos el video se muestra en nuestro navegador de forma adecuada y sin necesidad de incluir algún complemento adicional como se hacía en el pasado.
Un poco de responsive
Si tomamos el ejemplo anterior y redimensionamos nuestra página web veremos que el video puede salirse de nuestro navegador, esto es porque no le hemos dicho al contenedor que debe actuar de forma responsive. Veamos como si redimensionamos antes de realizar los ajustes:
Notamos entonces que el video se corta, lo que nos puede causar un pequeño problema si estamos haciendo una página web con una versión para móviles. Para corregir el problema que hemos detectado con el código del ejemplo anterior debemos incorporar algo de estilos CSS3 en nuestro código, para ello dentro de la etiqueta <head> vamos a incorporar lo siguiente:
<style type="text/css">
video {
max-width: 100%;
width: 100% !important;
height: auto !important;
}
</style>Este código lo que hace es decirle a la etiqueta <video> que debe adaptarse a la resolución de su contenedor, en el caso de nuestro ejemplo anterior es el body. Al finalizar tendremos el siguiente código luego de las modificaciones:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Nuestro primer video</title>
<style type="text/css">
video {
max-width: 100%;
width: 100% !important;
height: auto !important;
}
</style>
</head>
<body>
<video controls>
<source src="videoHTML5.mp4" type="video/mp4">
</video>
</body>
</html>Si ejecutamos el código en nuestro navegador y redimensionamos la pantalla podremos ver los cambios aplicados por nuestros estilos:
En esta oportunidad si notamos que el video aparece de forma completa en nuestra pantalla a pesar de que la resolución de la misma es menor a la que posee el video que deseamos mostrar, con esto hemos logrado nuestro primer contenedor de video responsive.
Otros complementos
Aunque el soporte de video a través de HTML5 es casi un estándar mundial, hay ocasiones en las que los clientes no tienen un navegador capaz de reproducir nuestro contenido, por lo que debemos tener en cuenta que para una experiencia de usuario totalmente satisfactoria tal vez necesitemos utilizar algún tipo de complemento adicional.
Otro uso muy popular de los videos es incluir el contenido de sitios como YouTube o Vimeo, estos casos son especiales ya que el contenido normalmente lo obtenemos a través de elementos <iframe>, por lo que existen complementos en JavaScript que nos permiten añadir el responsive de una manera más fácil que tener que construir un set de reglas por nuestra cuenta.
<iframe width="560" height="315" src="https://www.youtube.com/embed/JAUoeqvedMo" frameborder="0" allowfullscreen></iframe>Como vemos aún tenemos un par de casos que no se ajustan a lo que se quiere con HTML5 que es no necesitar de terceros a la hora de poner el contenido en nuestras páginas web, sin embargo como no todo es perfecto debemos estar informados que hay ocasiones en las cuales debemos recurrir a otras herramientas para lograr el objetivo.
Videos a pantalla completa
Otros complementos importantes son los que nos permiten colocar los videos como fondo o background de nuestras páginas, lo cual es una tendencia que cada vez está en un ascenso mayor, que es la de ofrecer videos a pantalla completa con contenido estático sobre ellos. Por ejemplo tenemos una tienda de deportes y queremos promocionar una nueva bicicleta, lo mejor sería un video de fondo de gente practicando el deporte y por encima las características del producto, esta funcionalidad se da mucho en este nicho aunque está encontrando otros segmentos como el área del turismo.
Generalmente esta tendencia se asocia a plugins jQuery en una combinación con frameworks como Bootstrap o Foundation, pero ya queda de parte de cada quien utilizar los complementos que le hagan falta según la misión de su aplicación web.
Con esto finalizamos este tutorial, donde hemos hecho una inclusión de video en nuestra página web y aplicando el diseño responsive sin mayor complicación, es importante que tomemos en cuenta los servicios externos que hacen de host de videos, ya que el contenido de este tipo tiene un peso considerable y puede afectar nuestro ancho de banda por lo que las técnicas que describimos aquí puede que no sean muy útiles en un ambiente donde el espacio sea reducido. Sin embargo el saber mostrar la información correctamente nos ayudará a crear experiencias de usuario más completas y por lo tanto nuestras páginas serán valoradas de la manera adecuada.
