Los videos en HTML son ideales para incorporar contenido multimedia en las páginas web, ya que les permite a los desarrolladores mostrar este recurso de manera directa sin depender de reproductores externos o plugins.
![<< [Plantilla gratuita] >> Plantillas de códigos de programación para HTML.](https://no-cache.hubspot.com/cta/default/53/bb3e5cad-5b6c-4956-a702-59b9da03864a.png){kind=small}
En este artículo, te contamos cómo puedes implementar paso a paso esta herramienta en el sitio web de tu negocio con ejemplos de código para su aplicación.
Principales razones para usar videos en HTML
- Contenido multimedia: agregan contenido atractivo al momento de hacer una página web y mejoran la experiencia del usuario, pues hacen que esta sea más interactiva.
- Presentación de información: ayudan a exponer información visual y auditiva, mediante formatos como tutoriales, presentaciones, demostraciones de productos, etc.
- Entretenimiento: son útiles para el esparcimiento en línea y para reproducir películas, programas de televisión en línea, videos musicales, entre otros.
- Publicidad y promoción: son una herramienta efectiva para la publicidad y la promoción de productos, servicios o eventos.Con ellos, los anunciantes pueden llegar a su audiencia objetivo.
- Educación en línea: se pueden utilizar para impartir clases, conferencias y contenido interactivo en plataformas de aprendizaje en línea.
- Compatibilidad: son compatibles con la mayoría de los navegadores modernos, lo que facilita la reproducción de videos sin necesidad de instalar complementos adicionales como Flash, gracias a que HTML5 ha introducido la etiqueta <video>.
- Personalización: permiten que los desarrolladores web personalicen la reproducción de videos mediante atributos y JavaScript. Esto les permite controlar aspectos como el diseño y la interacción del usuario.
- Accesibilidad: admiten etiquetas con información descriptiva y subtítulos, lo que favorece la accesibilidad para personas con discapacidades auditivas o visuales.
Cómo poner un video en HTML con ejemplo de código
- Prepara el archivo de video
- Crea una estructura básica HTML
- Inserta el elemento <video>
- Agrega las fuentes de video
- Agrega texto alternativo
1. Prepara el archivo de video
Asegúrate de que el archivo de video esté en un formato compatible como MP4, WebM o Ogg. Puedes convertirlo si es necesario.
2. Crea una estructura básica HTML
Abre tu editor de texto o entorno de desarrollo y crea un nuevo archivo HTML. Luego, agrega el esqueleto básico de HTML con las etiquetas <html>, <head> y <body>.
<!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>
<!-- Aquí agregarás el contenido de tu página -->
</body>
</html>
3. Inserta el elemento <video>
En el cuerpo (<body>) de tu archivo HTML, inserta el elemento <video> para contener el archivo de video. Puedes agregar atributos adicionales según tus necesidades, por ejemplo, width y height.
<video width="640" height="360" controls>
<!-- Aquí irán las fuentes de video y el texto alternativo -->
</video>
4. Agrega las fuentes de video
Dentro del elemento <video>, debes incluir una o más fuentes de video con la etiqueta <source>. Cada fuente 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.
<video width="640" height="360" controls>
<source src="ruta_del_video.mp4" type="video/mp4">
<source src="ruta_del_video.webm" type="video/webm">
<!-- Texto alternativo -->
</video>
El tipo MIME (multipurpose internet mail extensions) es una etiqueta que identifica la clase de contenido de un archivo en internet. En el contexto de los videos en HTML, se utiliza para especificar el formato del archivo de video que se proporciona.
A cada formato de video le corresponde un tipo MIME específico. Cuando se precisa en la etiqueta <source> dentro del elemento <video>, el navegador puede identificar qué formato de video es compatible y elegir el adecuado para reproducirlo en función de sus capacidades. Aquí hay algunos ejemplos de tipos MIME comunes para formatos de video:
- MP4 (MPEG-4 Part 14): video/mp4
- WebM: video/webm
- Ogg: video/ogg
- AVI: video/x-msvideo
Si proporcionas 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 fuente que mejor se ajuste a sus capacidades. Si ninguna es compatible, el navegador mostrará el texto alternativo especificado en el elemento <video>.
5. Agrega texto alternativo
En <video>, también puedes agregar un texto alternativo que se mostrará si el navegador no admite la etiqueta de video. Si empleas la etiqueta <p> u otro elemento de texto, puedes personalizar este mensaje.
<video width="640" height="360" controls>
<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>
Cómo poner un video de YouTube en HTML
- Abre tu editor de texto o entorno de desarrollo y crea un nuevo archivo HTML con la estructura básica.
- Obtén y copia el código de inserción del video proporcionado por YouTube. Por lo general, este se encuentra en la opción de «compartir» de la plataforma.
- Pega el código dentro del cuerpo (<body>) de tu archivo HTML. Puedes ajustar su ancho y la altura según tus preferencias. Tu código HTML final se verá similar a este ejemplo, con el código de inserción que desees.
<!DOCTYPE html>
<html>
<head>
<title>Video de YouTube</title>
</head>
<body>
<h1>Mi video de YouTube</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/6iG-0qvJNCQ" frameborder="0" allowfullscreen></iframe>
</body>
</html>
En este ejemplo, el src del <iframe> apunta a la URL del video de YouTube que vas a incrustar. La dirección se encuentra después de "/embed/" y "tu-video-id" debe reemplazarse con el ID que deseas mostrar. El atributo allowfullscreen permite que el video se reproduzca a pantalla completa cuando el usuario hace clic en el botón de pantalla completa del reproductor de YouTube.
Atributos de la etiqueta video
La etiqueta de video en HTML5 admite varios atributos con los que puedes controlar la apariencia, el comportamiento y otras características del archivo de video en tu página web. A continuación, enlistamos algunos de los atributos más comunes de la etiqueta <video>:
- src: especifica la URL del archivo de video que se debe cargar y reproducir. Tal como se muestra en la siguiente línea:
<video src="mi-video.mp4"></video>
- width: define el ancho del reproductor de video en píxeles:
<video width="640" height="360"></video>
- height: determina la altura del reproductor de video en píxeles:
<video width="640" height="360"></video>
- controls: agrega controles de reproducción, como botones de reproducción, pausa, volumen y barra de progreso. Estos pueden establecerse como un atributo booleano:
<video controls>
<source src="mi-video.mp4" type="video/mp4">
</video>
- autoplay: permite que el video se reproduzca automáticamente una vez que se cargue la página y se puede usar como booleano:
<video autoplay>
<source src="mi-video.mp4" type="video/mp4">
</video>
- loop: posibilita que el video se repita en bucle de forma continua. Asimismo, puede usarse como un atributo booleano:
<video loop>
<source src="mi-video.mp4" type="video/mp4">
</video>
- preload: controla cómo se pre-carga el video. Puede tener los valores «auto»(predeterminado), «metadata» (solo se carga la información sobre la duración y los metadatos) o «none» (no se pre-carga):
<video preload="auto">
<source src="mi-video.mp4" type="video/mp4">
</video>
- poster: especifica una imagen de portada que se muestra antes de que el video comience a reproducirse. Debe ser una URL de un archivo de imagen:
<video poster="imagen-de-portada.jpg">
<source src="mi-video.mp4" type="video/mp4">
</video>
- muted: silencia el video para que se reproduzca sin sonido. De igual manera, puede emplearse como un atributo booleano:
<video muted>
<source src="mi-video.mp4" type="video/mp4">
</video>
La etiqueta <video> en HTML5 es una herramienta poderosa para incorporar videos en una página web. Esta les permite a los programadores agregar contenido multimedia de manera flexible y personalizable, ya sea desde archivos locales o en línea, como YouTube.
Además, con atributos como src, controls, autoplay, loop y más puedes controlar la apariencia y el comportamiento de este recurso para brindarles a los usuarios una experiencia de visualización óptima. Ya sea para fines educativos, de entretenimiento, promocionales o informativos, la etiqueta <video> es una parte esencial del diseño web profesional. Comienza a implementarlo en el sitio web de tu negocio.
