Opciones para insertar vídeo en HTML en tu web

Los elementos audiovisuales no solo se caracterizan por atraer la atención y deleitar a los visitantes de una web. Los principales motores de búsqueda recompensan el valor añadido que ofrecen los contenidos multimedia. En particular, los vídeos permiten personalizar la información de tu web, así como representar productos y servicios de forma mucho más detallada y precisa que simplemente con imágenes y texto. Sin embargo, durante algún tiempo la integración de vídeos en las páginas web fue una tarea complicada, especialmente porque la visualización de contenidos multimedia requiere la instalación de plugins para el navegador (p. ej. Adobe Flash Player). Por lo tanto, cuando el usuario no cuenta con los complementos necesarios en la terminal o no los ha actualizado periódicamente, se suelen presentar problemas de incompatibilidad y fallos en la seguridad.

De la misma forma, los complicados códigos de inserción obligaban a los proveedores a invertir mucho tiempo en la conversión de los vídeos a formatos apropiados, por ejemplo SWF. Afortunadamente, este tipo de complicaciones pronto serán historia. Desde la quinta versión del lenguaje de marcado de hipertexto (HTML) se dispone de un elemento nativo con el cual es posible integrar vídeos como contenidos en el código de la página web. Alternativamente existe la posibilidad de alojar los vídeos en proveedores externos tales como YouTube o Vimeo. A continuación, te explicamos cómo hacerlo.

Insertar vídeos con HTML5 es una tarea muy sencilla. Lo único que se necesita es un elemento <video> nativo que pueda ser ampliado por medio de atributos especiales. El siguiente código muestra cómo añadir recursos de vídeo al código fuente de tu web

En el ejemplo, el elemento <video> contiene el URL donde está alojado el video (scr=“ejemplo.mp4”), así como los atributos que definen cómo se mostrará el vídeo en la web: anchura, altura, controles e imagen de vista previa. El texto que aparece en el medio solo se muestra cuando un navegador no puede mostrar el vídeo. Por lo general, los operadores web utilizan esta función para proporcionar una descripción alternativa y un enlace de descarga.

Para integrar un recurso a través del elemento <video> es necesario que este contenga un enlace al recurso, ya sea como atributo scr o elementosecundario “source”. Para modificar y gestionar un elemento de vídeo es posible valerse de los siguientes atributos:

Las versiones actuales de los navegadores web más comunes soportan HTML5. Aun así, si quieres que los vídeos de tu página web también sean accesibles para usuarios que no dispongan de las últimas actualizaciones, puedes utilizar enlaces de texto dentro del elemento <video>, ofreciéndoles archivos descargables independientes. De esta forma, el usuario recibe un texto alternativo con el que podrá descargar el vídeo y visualizarlo en su reproductor de vídeo local.

La especificación HTML5 define el elemento <video> y sus respectivas interfaces de programación (application programming interface, API), pero no especifica la codificación del vídeo. Por esto, la elección del formato suele ser un problema para los administradores de páginas web. WebM, OggTheora o H.264/MPEG4 son formatos con sus respectivas ventajas y desventajas, lo que ha impedido que los principales navegadores web hayan podido ponerse de acuerdo. Mientras que Internet Explorer y Safari se decidieron por el formato H.264/MPEG4, un formato disponible desde 2013 casi de forma universal, Firefox, Chrome y Opera soportan formatos libres tales como OggTheora y WebM.

Para evitar incompatibilidades, se recomienda proporcionar los vídeos en diferentes formatos. Para ello, el elemento <video> permite insertar vídeos a través del elemento secundario source y marcarlos con el atributo type para que puedan ser reconocidos por el navegador web.

En caso de que se integren en el elemento <video> otros elementos source con el atributo type, el navegador web seleccionará automáticamente el formato de vídeo al que da preferencia. Cabe resaltar que para insertar un vídeo con este procedimiento, el elemento <video> no puede contener atributos src.

Quien no quiera guardar vídeos en su servidor y prefiera alojarlos externamente, podrá integrarlos utilizando un código de inserción desde YouTube o Vimeo. Este tipo de plataformas garantizan la compatibilidad del contenido con los navegadores más comunes, consiguiendo una correcta visualización en la mayoría de dispositivos de salida. Con el alojamiento externo de los vídeos, la carga de transmisión no recae sobre el servidor propio. Sin embargo, los operadores web deben informarse con antelación sobre las condiciones de uso de este tipo de plataformas y ajustar el código de inserción, también conocido como “embeded code”, a sus necesidades.

Si quieres insertar un vídeo desde YouTube solo tienes que encontrarlo y solicitar el código correspondiente. Aquí también es posible definir algunos aspectos de la configuración general, tales como las dimensiones o los subtítulos. Para evitar la reproducción de contenido externo en tu web, es recomendable desactivar la función de vista previa de vídeos alternativos. En el peor de los casos podría tratarse de vídeos de tus competidores directos como consecuencia de contenido visto por otros usuarios relacionado con criterios de búsqueda idénticos.