Opciones para insertar vídeo en HTML en tu web

Desde la llegada de HTML5 existe una etiqueta nativa que permite integrar vídeos directamente como parte del contenido web. También puedes optar por alojar los vídeos en plataformas como YouTube o Vimeo e insertarlos en tu página mediante un código de inserción. En este artículo te mostramos cómo hacerlo de forma sencilla.

HTML5: integra tus vídeos fácilmente

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

<video src="ejemplo.mp4" width="320" "height="240" controls poster="vistaprevia.jpg">
    <p>Lo sentimos. Este vídeo no puede reproducirse en tu navegador.<br>
    La versión descargable está disponible en <a href="URL">Enlace</a></p>
</video>

El elemento video del ejemplo contiene la URL del recurso de vídeo (src="ejemplo.mp4") así como los atributos opcionales width, height, controls y poster, que definen cómo se muestra el vídeo en la página web. El texto situado entre la etiqueta de apertura y la de cierre del elemento video solo se muestra cuando el navegador no puede reproducir el vídeo. Quienes gestionan páginas web suelen aprovechar esta función para ofrecer una descripción alternativa y un enlace de descarga al recurso.

Los atributos adicionales de un elemento de vídeo en HTML5

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

Compatibilidad de códecs en HTML5

La especificación de HTML5 define el elemento video y la correspondiente interfaz de programación (API), pero no establece requisitos sobre la codificación de vídeo. Esto supone un reto para los administradores de páginas web, ya que deben elegir el formato adecuado. Cada uno de los formatos de vídeo más comunes, como WebM, Ogg Theora o H.264, tiene ventajas e inconvenientes. Hasta ahora no existe un estándar común con soporte en todos los navegadores. La siguiente tabla resume la compatibilidad de códecs de vídeo en los navegadores más importantes:

*soporte parcial

Para evitar incompatibilidades, se recomienda ofrecer distintos formatos al insertar un vídeo en tu página web. El elemento video permite este propósito mediante el uso del elemento hijo source, que sirve para incluir varias fuentes de vídeo y especificar el formato con el atributo type:

<video width="320" height="240" controls poster="vista-previa.jpg">
    <source src="ejemplo-av1.webm" type="video/webm; codecs=av01.0.05M.08">
    <source src="ejemplo-vp9.webm" type="video/webm; codecs=vp9">
    <source src="ejemplo.mp4" type="video/mp4; codecs=avc1.42E01E">
    Tu navegador no es compatible con la etiqueta de vídeo.
</video>

Cuando se añaden varios elementos source con su atributo type correspondiente dentro del elemento video, el navegador selecciona automáticamente el formato de vídeo que prefiera al cargar la página. Es importante tener en cuenta que, en este tipo de integración, el elemento video no debe contener un atributo src con un recurso.

Insertar vídeos en una página web a través de una plataforma de vídeo

Quienes prefieren no insertar vídeos directamente con HTML, sino delegar el alojamiento de vídeos en un proveedor externo, pueden subir su material de forma gratuita a plataformas como YouTube o Vimeo e integrar los clips en su página mediante un código de inserción.

Dado que las plataformas de vídeo más populares garantizan la compatibilidad de sus contenidos con todos los navegadores importantes, los formatos que utilizan estos proveedores son compatibles en la mayoría de los dispositivos. La externalización o outsourcing de vídeos tiene además la ventaja de que el propio servidor no se sobrecarga con el streaming. Sin embargo, conviene informarse previamente sobre las condiciones de uso del servicio de alojamiento de vídeo y adaptar el código de inserción a las necesidades propias.

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. De lo contrario, la plataforma de vídeo mostrará en el reproductor incrustado contenidos de otros usuarios asociados a palabras clave similares. En el peor de los casos, podrían aparecer vídeos de un competidor directo.