La Etiqueta VIDEO

Permite incrustar contenido de video en una página web de manera nativa, sin necesidad de plugins externos.

La etiqueta <video> permite incrustar contenido de video en una página web de manera nativa, sin necesidad de plugins externos. A continuación, te guiamos paso a paso para usarla correctamente.

Sintaxis básica

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

src: Ruta al archivo de video (ej: video.mp4, video.webm).
controls: Muestra controles de reproducción (play, pausa, volumen).

Formatos de video compatibles

Los navegadores soportan diferentes formatos. Para máxima compatibilidad, usa múltiples fuentes:

<video controls>
  <source src="video.mp4" type="video/mp4"> <!-- Prioridad para MP4 -->
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  <!-- Mensaje si el navegador no soporta video -->
  <p>Tu navegador no admite la etiqueta &lt;video&gt;.</p>
</video>

Atributos clave

Atributo	Descripción
`autoplay`	Inicia la reproducción automáticamente (puede ser bloqueado sin `muted`).
`muted`	Silencia el video. Requerido para `autoplay` en muchos navegadores.
`loop`	Reproduce el video en bucle.
`poster`	Muestra una imagen antes de la reproducción (ej: `poster="thumbnail.jpg"`).
`width`/`height`	Define el tamaño del reproductor (recomendado usar CSS para responsividad).
`preload`	Sugiere cómo precargar el video: `auto`, `metadata`, `none`.
`playsinline`	Evita que el video se reproduzca en pantalla completa en móviles.

Ejemplo con atributos:

<video 
  controls 
  autoplay 
  muted 
  loop 
  poster="thumbnail.jpg" 
  width="600"
  preload="metadata"
>
  <source src="video.mp4" type="video/mp4">
</video>

Subtítulos y accesibilidad

Usa la etiqueta <track> para agregar subtítulos en formato WebVTT:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track 
    src="subtitles-es.vtt" 
    kind="subtitles" 
    srclang="es" 
    label="Español"
    default
  >
</video>

Ejemplo de archivo subtitles-es.vtt:

WEBVTT

00:00:01.000 --> 00:00:04.000
Hola, bienvenido al tutorial.

Video responsivo

Aplica CSS para adaptar el video al tamaño de la pantalla:

<style>
  .video-responsive {
    max-width: 100%;
    height: auto;
  }
</style>

<video class="video-responsive" controls>
  <source src="video.mp4" type="video/mp4">
</video>

Personalización con JavaScript

Controla la reproducción mediante la API de JavaScript:

<video id="miVideo" src="video.mp4"></video>
<button onclick="document.getElementById('miVideo').play()">Reproducir</button>
<button onclick="document.getElementById('miVideo').pause()">Pausar</button>

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    .contenedor-video {
      max-width: 800px;
      margin: 20px auto;
    }
    .video-responsive {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="contenedor-video">
    <video 
      class="video-responsive"
      controls 
      muted 
      poster="thumbnail.jpg"
      preload="metadata"
    >
      <source src="video.mp4" type="video/mp4">
      <source src="video.webm" type="video/webm">
      <track 
        src="subtitles-es.vtt" 
        kind="subtitles" 
        srclang="es" 
        label="Español"
        default
      >
      <p>Tu navegador no admite la etiqueta &lt;video&gt;.</p>
    </video>
  </div>
</body>
</html>

Mejores prácticas

Formatos recomendados: Usa MP4 (H.264) como formato principal por su compatibilidad.
Optimización: Reduce el peso del video con herramientas como HandBrake.
Subtítulos: Añade pistas de texto para accesibilidad.
CDN: Aloja videos grandes en servicios como YouTube o Vimeo para mejor rendimiento.

Notas importantes

Autoplay bloqueado: Muchos navegadores bloquean autoplay a menos que el video esté silenciado (muted).
Derechos de autor: Asegúrate de tener permiso para usar el video en tu sitio.

¡Ahora puedes integrar videos en tu sitio web de manera profesional y accesible!