Video en HTML

21/2/24, 21:38 Cómo insertar videos en HTML paso a paso (con ejemplo)
SITIO WEB | LECTURA DE 6 MIN.
Cómo insertar videos en HTML paso a paso (con ejemplo)

Escrito por Pablo Londoño
En la actualidad, la prioridad del diseño web en el área empresarial es servir como un medio más destinado a optimizar la
interacción entre los clientes y una organización a través de su experiencia de navegación por sus recursos digitales, en particular,
por su página de Internet.
Existen muchas opciones probadas y relevantes para alcanzar este fin, como la implementación de videos. Sigue leyendo este
artículo porque te diremos de qué manera puedes integrar un video a tu sitio, para qué puedes emplearlo y cuáles son sus
ventajas y desventajas.
<< Guía básica sobre HTML y CSS para marketers [Descargar gratis] >>
Cómo pueden ayudarte los videos a impulsar tu sitio web

Los videos son una herramienta poderosa en el diseño web y se utilizan con diversos propósitos. Estos resultan útiles al hacer un
sitio web para varios propósitos:
Presentación de productos o servicios. Muestran de manera clara cómo funcionan tus productos o servicios. Los demos o
tutoriales en video funcionan para explicar características clave, proporcionar ejemplos de uso y demostrar el valor de lo que
ofreces.
Contenido educativo. Son una excelente manera de enseñar conceptos complejos de forma visual y fácil de entender. Los
videos educativos, conferencias o cursos en línea te ayudarán a compartir información valiosa a tus visitantes.
Testimonios y reseñas. Grabar e incluir testimonios de clientes satisfechos puede tener un impacto significativo en la
confianza y credibilidad de tu negocio. Mostrar personas reales que hablen de manera positiva sobre tu producto o servicio
impactará en las decisiones de compra de otros usuarios.
https://blog.hubspot.es/website/como-insertar-video-html
 1/11
Historia de la marca. Los videos son ideales para contar la historia de tu marca de una forma atractiva y emocional. Estos
pueden presentar el origen de tu empresa, tus valores, el equipo detrás de ella o cualquier otro aspecto relevante que desees
destacar.
Fondos de video. Otra posibilidad es utilizarlos como fondos en lugar de imágenes estáticas y, con ello, brindar un aspecto
más dinámico y atractivo a tu sitio web. Este recurso funciona bien para portafolios, páginas de inicio o landing pages.
Entretenimiento y contenido viral. Si tu objetivo es captar la atención y el compromiso de los visitantes, los videos
entretenidos, virales o humorísticos pueden ser útiles. Podrás compartir contenido relevante y divertido para mantener a los
clientes interesados y aumentar el tiempo que pasan en tu página.
Cómo insertar un video en HTML paso a paso
1. Prepara el archivo de video.
2. Crea una estructura básica HTML.
3. Inserta el elemento <video>.
4. Añade las fuentes de video.
5. Crea un texto alternativo.
Si alguna de las posibilidades para implementar videos en una página web te interesa y deseas poner manos a la obra ya en la
tuya, aquí te enseñamos paso a paso cómo añadir un video en HTML. ¡Continua leyendo!
1. Prepara el archivo de video

Para comenzar, asegúrate de que tu video esté en un formato compatible, como MP4, WebM o Ogg. Si no es así, puedes
convertirlo a alguno de ellos con ayuda de un programa específico para ello.
2. Crea una estructura básica HTML

Abre tu editor de texto o entorno de desarrollo y crea un nuevo archivo HTML. Agrega el esqueleto básico de HTML con la etiqueta
<html>, <head> y <body>, como se muestra aquí:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de tu página</title>
</head>
<body>
 2/11

</body>
</html>
3. Inserta el elemento <video>

En el cuerpo (<body>) de tu archivo HTML, inserta el elemento <video> para contener tu archivo. Puedes agregar atributos
adicionales según tus necesidades, como width y height:
<video width="640" height="360" controls>


</video>
4. Añade las fuentes de video

Dentro del elemento <video>, debes incluir una o más fuentes de video con la etiqueta <source>. Cada fuente de video debe tener
un atributo src que apunte a la ubicación del archivo de video y un atributo type que especifique el tipo MIME del video:

<source src="ruta_del_video.mp4" type="video/mp4">
<source src="ruta_del_video.webm" type="video/webm">

</video>
El tipo MIME (Multipurpose Internet Mail Extensions) es una etiqueta que identifica el tipo de contenido de un archivo en Internet.
En el contexto de los videos en HTML, el tipo MIME del video sirve para especificar el formato del archivo de video.
Cada formato de video está asociado a un tipo MIME específico. Al especificar el tipo MIME en la etiqueta <source> dentro del
elemento <video>, el navegador identificará qué formato de video es compatible para el archivo y elegirá el adecuado para
reproducirlo en función de sus capacidades.
Estos son algunos de los tipos MIME más comunes para formatos de video:
MP4 (MPEG-4 Part 14): video/mp4.
WebM: video/webm.
Ogg: video/ogg.
AVI: video/x-msvideo.
Al proporcionar múltiples fuentes de video con diferentes tipos MIME, como se muestra en el ejemplo anterior, se le da, al
navegador, la opción de seleccionar la que mejor se ajuste a sus capacidades. Si ninguna de las fuentes de video es compatible,
el navegador mostrará un texto alternativo en el elemento <video>.
 3/11
5. Crea un texto alternativo

En el elemento <video>, puedes incluir un texto alternativo que aparecerá si el navegador no admite la etiqueta de video. Puedes
usar la etiqueta <p> o cualquier otro elemento de texto para mostrar un mensaje:

<source src="ruta_del_video.mp4" type="video/mp4">
<source src="ruta_del_video.webm" type="video/webm">
<p>Tu navegador no admite la etiqueta de video.</p>
</video>
Atributos de la etiqueta video

A continuación, listamos algunas características que puedes agregar en tu código para definir cómo se mostrará tu video y
personalizarlo según el diseño y propósito de tu sitio web.
Src: especifica la ruta o URL del archivo de video. Puede ser relativa o absoluta.
Controls: muestra los controles de reproducción estándar del navegador, como el botón de reproducción, pausa y volumen. Se
recomienda incluirlo para facilitar la interacción con el video. Estos recursos se escriben de la siguiente manera:
<video src="ruta_del_video.mp4" controls></video>
Width y height: especifica las dimensiones del video en píxeles. Puedes establecer valores fijos para definir un tamaño
particular para el video:
<video src="ruta_del_video.mp4" width="640" height="360" controls></video>
Autoplay: reproduce automáticamente el video tan pronto como la página se cargue. Sin embargo, ten en cuenta que los
navegadores modernos suelen bloquear la reproducción automática por motivos de usabilidad y experiencia del usuario:
<video src="ruta_del_video.mp4" autoplay></video>
Loop: reproduce el video en bucle. Esto hará que el video se repita hasta que el usuario lo detenga:
 4/11
<video src="ruta_del_video.mp4" loop></video>
Poster: especifica una imagen de portada para el video. Esta se mostrará antes de reproducirlo y si el video no puede ser
cargado:
<video src="ruta_del_video.mp4" poster="ruta_de_la_imagen.jpg"></video>
Preload: define cómo se carga el video. Los posibles valores son «none» (no se precarga), «metadata» (se precarga solo la
información básica) y «auto» (se precarga completamente). El valor predeterminado es «auto»:
<video src="ruta_del_video.mp4" preload="auto"></video>
Muted: reproduce el video sin sonido. Esto puede ser útil en escenarios donde prefieres que el video se reproduzca en silencio y
el usuario tenga la opción de activar el sonido de manera manual:
<video src="ruta_del_video.mp4" muted></video>
Ventajas y desventajas de los videos en HTML

Ventajas
Experiencia visual. Los videos permiten transmitir información de manera visual y atractiva. Estos pueden tener diferentes
usos como ofrecer demostraciones, tutoriales, presentaciones, testimonios, entre otros.
Mayor engagement. Suelen captar más atención y generar mayor engagement por parte de los usuarios, pues aumentan el
tiempo que estos pasan en tu sitio web, a la vez que mejoran su experiencia de navegación.
Versatilidad. Pueden aplicarse en diversos contextos, como en sitios web, aplicaciones móviles, presentaciones y cursos en
línea. Además, se adaptan a varios contenidos y fines.
Comunicación efectiva. Transmiten mejor los mensajes, ya que combinan elementos visuales, sonido y narración. Sirven para
contar historias, explicar conceptos complejos o promocionar productos y servicios.
Desventajas
 5/11
Mayor tamaño de archivo. Los videos suelen ocupar más espacio en comparación con otros contenidos, lo que puede afectar
la velocidad de carga de la página. Esto podría generar una experiencia negativa para los usuarios con conexiones lentas.
Incompatibilidad. Algunos formatos de video no son compatibles con todos los navegadores o dispositivos. Es fundamental
emplear formatos de video populares y proporcionar fuentes alternativas para garantizar una reproducción adecuada en
todas las plataformas.
Dependencia de la conexión a internet. Para reproducir los videos en línea, los usuarios requieren una conexión a internet
estable y rápida. Si la conexión es lenta o inestable, la reproducción del video puede interrumpirse o presentar problemas de
carga.
Limitaciones de accesibilidad. Los videos pueden presentarse como un desafío para los usuarios con discapacidades visuales
o auditivas. Es necesario que proporciones alternativas accesibles, como subtítulos, transcripciones y descripciones de audio,
para garantizar la accesibilidad del contenido.
Alternativas al uso de videos en HTML

Tal vez este recurso no se ajusta a lo que buscas para tu negocio o las desventajas tecnológicas hacen que lo reconsideres. En
este caso, te sugerimos algunas alternativas que podrían aportar otros beneficios a tu presencia digital.
Imágenes animadas (GIF). Puedes usar imágenes animadas en formato GIF para crear efectos visuales o animaciones
simples. Los GIF admiten la reproducción automática y son ampliamente compatibles con los navegadores. Con la siguiente
línea, podrás incorporarlos en HTML:
<img src="ruta_de_la_imagen.gif" alt="Animación GIF">
Secuencias de imágenes. Otra opción es crear una animación que reproduzca una secuencia de imágenes en rápida sucesión
con JavaScript. Esto se logra al cambiar, de forma dinámica, la imagen mostrada en un intervalo de tiempo:
<img id="animation" src="imagen1.jpg" alt="Animación de secuencia de imágenes">
<script>
var images = ["imagen1.jpg", "imagen2.jpg", "imagen3.jpg"];
var index = 0;
function playAnimation() {
var img = document.getElementById("animation");
img.src = images[index];
index = (index + 1) % images.length;
setTimeout(playAnimation, 1000); // Cambia la imagen cada segundo
}
playAnimation();
</script>
Bibliotecas de animación. Las bibliotecas JavaScript, como CSS animations o JavaScript animations, podrían servirte
también para crear animaciones más complejas y efectos visuales interactivos. Estas proporcionan una amplia gama de
 6/11
opciones y personalización para la animación.
SVG Animado: Con Scalable Vector Graphics (SVG), puedes elaborar gráficos vectoriales escalables y animados en código
XML. Estas animaciones y transiciones en SVG lograrán efectos visuales más avanzados:
<svg width="200" height="200">

<circle cx="100" cy="100" r="50" fill="red">
<animate attributeName="cx" from="100" to="200" dur="1s" repeatCount="indefinite" />
</circle>
</svg>
Los videos son una herramienta poderosa para transmitir información de manera visual y atractiva, lo que puede aumentar el
engagement y mejorar la experiencia del usuario. También permiten comunicar mensajes de manera efectiva y versátil, ya que se
adaptan a diferentes contextos y tipos de contenido. Sin embargo, es importante tener en cuenta sus limitaciones.
Antes de implementar un video en la página web de tu empresa, considera tus objetivos específicos, recursos disponibles y
necesidades del proyecto. Contempla su impacto en la experiencia de usuario, la compatibilidad con múltiples plataformas y la
accesibilidad a tu contenido. Si los videos son relevantes y lo enriquecen o si cuentas con el presupuesto para abordar sus
limitaciones, entonces podrían ser una excelente adición a tu proyecto web.
Publicado originalmente el Jun 27, 2023 7:00:00 AM, actualizado el 28 de junio de 2023
Topics: HTML
Artículos relacionados
 7/11
Cómo poner un icono en HTML paso a paso
 8/11
Cómo usar la etiqueta section en HTML
 9/11
Cómo utilizar el HTML semántico (paso a paso)
Funciones populares

Herramientas gratuitas

Empresa

Clientes

Partners

 10/11
Copyright © 2023 HubSpot, Inc.
Aspectos legales | Política de privacidad | Seguridad | Accesibilidad en sitios web | Administrar las cookies
https://blog.hubspot.es/website/como-insertar-video-html 11/11

Video en HTML

Cargado por

Copyright:

Formatos disponibles

Video en HTML

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Video en HTML

Cargado por

Copyright:

Formatos disponibles

21/2/24, 21:38 Cómo insertar videos en HTML paso a paso (con ejemplo)

SITIO WEB | LECTURA DE 6 MIN.

Cómo insertar videos en HTML paso a paso (con ejemplo)

Cómo pueden ayudarte los videos a impulsar tu sitio web

Cómo insertar un video en HTML paso a paso

1. Prepara el archivo de video.

2. Crea una estructura básica HTML.

3. Inserta el elemento <video>.

4. Añade las fuentes de video.

5. Crea un texto alternativo.

1. Prepara el archivo de video

2. Crea una estructura básica HTML

3. Inserta el elemento <video>

<video width="640" height="360" controls>

4. Añade las fuentes de video

<video width="640" height="360" controls>

MP4 (MPEG-4 Part 14): video/mp4.

5. Crea un texto alternativo

<video width="640" height="360" controls>

Atributos de la etiqueta video

<video src="ruta_del_video.mp4" controls></video>

<video src="ruta_del_video.mp4" width="640" height="360" controls></video>

<video src="ruta_del_video.mp4" autoplay></video>

<video src="ruta_del_video.mp4" loop></video>

<video src="ruta_del_video.mp4" poster="ruta_de_la_imagen.jpg"></video>

<video src="ruta_del_video.mp4" preload="auto"></video>

<video src="ruta_del_video.mp4" muted></video>

Ventajas y desventajas de los videos en HTML

Alternativas al uso de videos en HTML

<img src="ruta_de_la_imagen.gif" alt="Animación GIF">

<img id="animation" src="imagen1.jpg" alt="Animación de secuencia de imágenes">

opciones y personalización para la animación.

<svg width="200" height="200">

Cómo poner un icono en HTML paso a paso

SITIO WEB | LECTURA DE 3 MIN.

Cómo usar la etiqueta section en HTML

SITIO WEB | LECTURA DE 3 MIN.

Cómo utilizar el HTML semántico (paso a paso)

SITIO WEB | LECTURA DE 6 MIN.

Copyright © 2023 HubSpot, Inc.

También podría gustarte