Opciones para insertar vídeo en HTML en tu web
Equipo editorial de IONOS7 mins
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.
- Domina el mercado con nuestra oferta 3x1 en dominios
- Tu dominio protegido con SSL Wildcard gratis
- 1 cuenta de correo electrónico por contrato
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">
Lo sentimos. Este vídeo no puede ser reproducido en tu navegador.<br>
La versión descargable está disponible en <a href="URL">Enlace</a>.
</video>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.
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 scr o elemento secundario “source”. Para modificar y gestionar un elemento de vídeo es posible valerse de los siguientes atributos:
| Atributo | Función |
|---|---|
| width/height | Los atributos width y height permiten especificar al navegador las dimensiones del vídeo. En caso de que no se haga, este tomará por defecto la información del tamaño contenida en el archivo de vídeo. El navegador ajustará el tamaño automáticamente en caso de que solo se especifique uno de los valores. |
| controls | El atributo controls permite activar la barra de control del navegador web. Alternativamente también es posible definir sus controles propios a través de JavaScript. |
| poster | El atributo poster hace referencia al archivo de imagen que se utilizará como vista previa del vídeo. En caso de que este no sea definido, el primer fotograma del vídeo se utilizará como vista preliminar. |
| autoplay | El atributo autoplay indica al navegador que debe reproducir el vídeo automáticamente una vez se finalice la carga de la web. |
| loop | Con loop el vídeo se reproducirá en bucle. |
| muted | Para silenciar el tono del vídeo se utiliza el atributo muted. |
| preload | El atributo preload sugiere al navegador cómo debe ser cargado el vídeo una vez finalizada la descarga de la página web. Las opciones para ello son: auto (se carga completamente), preload (el vídeo carga determinados metadatos) y none (impide la carga previa de datos de vídeo). |
Navegadores sin soporte HTML5
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.
El caos del códec HTML5
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.
| Navegador | MP4 (archivos MPEG4 con códec de vídeo H.264 + códec de audio AAC) | WebM (archivos WebM con códec de vídeo VP8/VP9 + códec de audio Vorbis ) | Ogg (archivos Ogg con códec de vídeo Theora + código de audio Vorbis) |
|---|---|---|---|
| IE 9+ | sí | no | no |
| Firefox | sí | sí | sí |
| Chrome | sí | sí | sí |
| Safari | sí | no | no |
| Opera | sí | sí | sí |
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.
<video width=320 height=240 controls poster="vistaprevia.jpg">
<source src="ejemplo.webm" type="video/webm">
<source src="ejemplo.ogg" type="video/ogg">
<source src="ejemplo.mp4" type="video/mp4">
</video>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.
Integrar contenido audiovisual desde plataformas de vídeo
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.
