Opciones para insertar vídeo en HTML en tu web

Desde la llegada de HTML5 existe una etiqueta nativa que permite integrar vídeos di­re­c­ta­me­n­te como parte del contenido web. También puedes optar por alojar los vídeos en pla­ta­fo­r­mas como YouTube o Vimeo e in­se­r­tar­los 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á­ci­l­me­n­te

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 es­pe­cia­les. 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 op­cio­na­les 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 re­pro­du­cir el vídeo. Quienes gestionan páginas web suelen apro­ve­char esta función para ofrecer una de­s­cri­p­ción al­te­r­na­ti­va y un enlace de descarga al recurso.

Los atributos adi­cio­na­les 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 se­cu­n­da­rio source. Para modificar y gestionar un elemento de vídeo es posible valerse de los si­guie­n­tes atributos:

Co­m­pa­ti­bi­li­dad de códecs en HTML5

La es­pe­ci­fi­ca­ción de HTML5 define el elemento video y la co­rre­s­po­n­die­n­te interfaz de pro­gra­ma­ción (API), pero no establece re­qui­si­tos sobre la co­di­fi­ca­ción de vídeo. Esto supone un reto para los ad­mi­ni­s­tra­do­res 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 in­co­n­ve­nie­n­tes. Hasta ahora no existe un estándar común con soporte en todos los na­ve­ga­do­res. La siguiente tabla resume la co­m­pa­ti­bi­li­dad de códecs de vídeo en los na­ve­ga­do­res más im­po­r­ta­n­tes:

*soporte parcial

Para evitar in­co­m­pa­ti­bi­li­da­des, se re­co­mie­n­da 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 es­pe­ci­fi­car 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 co­rre­s­po­n­die­n­te dentro del elemento video, el navegador se­le­c­cio­na au­to­má­ti­ca­me­n­te el formato de vídeo que prefiera al cargar la página. Es im­po­r­ta­n­te tener en cuenta que, en este tipo de in­te­gra­ció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 pla­ta­fo­r­ma de vídeo

Quienes prefieren no insertar vídeos di­re­c­ta­me­n­te con HTML, sino delegar el alo­ja­mie­n­to de vídeos en un proveedor externo, pueden subir su material de forma gratuita a pla­ta­fo­r­mas como YouTube o Vimeo e integrar los clips en su página mediante un código de inserción.

Dado que las pla­ta­fo­r­mas de vídeo más populares ga­ra­n­ti­zan la co­m­pa­ti­bi­li­dad de sus co­n­te­ni­dos con todos los na­ve­ga­do­res im­po­r­ta­n­tes, los formatos que utilizan estos pro­vee­do­res son co­m­pa­ti­bles en la mayoría de los di­s­po­si­ti­vos. La ex­te­r­na­li­za­ción o outsou­r­ci­ng de vídeos tiene además la ventaja de que el propio servidor no se so­bre­ca­r­ga con el streaming. Sin embargo, conviene in­fo­r­mar­se pre­via­me­n­te sobre las co­n­di­cio­nes de uso del servicio de alo­ja­mie­n­to de vídeo y adaptar el código de inserción a las ne­ce­si­da­des propias.

Si quieres insertar un vídeo desde YouTube solo tienes que en­co­n­trar­lo y solicitar el código co­rre­s­po­n­die­n­te. Aquí también es posible definir algunos aspectos de la co­n­fi­gu­ra­ción general, tales como las di­me­n­sio­nes o los su­b­tí­tu­los. Para evitar la re­pro­du­c­ción de contenido externo en tu web, es re­co­me­n­da­ble des­ac­ti­var la función de vista previa de vídeos al­te­r­na­ti­vos. De lo contrario, la pla­ta­fo­r­ma de vídeo mostrará en el re­pro­du­c­tor in­cru­s­ta­do co­n­te­ni­dos de otros usuarios asociados a palabras clave similares. En el peor de los casos, podrían aparecer vídeos de un co­m­pe­ti­dor directo.