HTML video: controles, reproducción automática, tamaño adaptable y errores

HTML video incrusta un reproductor de video en una página web. Configure la URL del archivo con src o elementos secundarios source, y agregue controls para que los usuarios puedan reproducirlo y pausarlo. Las políticas del navegador pueden bloquear la reproducción automática incluso cuando está presente el atributo autoplay.

Elija atributos para la experiencia de reproducción

controls, muted, autoplay y loop son atributos booleanos. Su presencia los habilita, por lo que autoplay="false" no desactiva la reproducción automática. Eliminar el atributo la desactiva. Una solicitud de reproducción automática necesita la carga de medios, por lo que preload="none" por sí sola no puede evitar la descarga.

Ejecuta un ejemplo completo de video

Guarda este código como video.html y ábrelo en un navegador. Carga la muestra pública de flores utilizada en la documentación de MDN y necesita conexión a Internet. Para tu propio servicio, aloja el video que tengas derecho a usar y reemplaza las URLs.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reproducción de vídeo HTML</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    video { display: block; width: 640px; max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <h1>Vídeo de flores</h1>
  <video id="flower" controls playsinline preload="metadata" aria-label="Flores moviéndose con el viento">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4">
    Este navegador no admite el elemento video.
  </video>
  <p>Descripción: las flores y la hierba cercana se mueven con el viento.</p>
  <p><a href="https://developer.mozilla.org/shared-assets/videos/flower.mp4"
    target="_blank" rel="noopener noreferrer">Abrir el archivo de vídeo MP4</a></p>
</body>
</html>

1. Verifica que haya un reproductor con un botón de reproducción y actívalo. Las flores deberían moverse y la posición de reproducción avanzar. El ejemplo predeterminado no tiene el atributo de reproducción automática ni de bucle.
2. Pausa la reproducción para detener el movimiento. En una ventana estrecha, el reproductor debería reducirse dentro del ancho del contenido.
3. Para comparar la repetición, agregue solo loop a la etiqueta de video de apertura y reabra el archivo. Verifique que la reproducción vuelva al inicio después de llegar al final, luego elimine el atributo para restaurar el comportamiento original.

source ofrece formatos de archivo para que el navegador pueda elegir un candidato compatible. Prepare archivos WebM y MP4 reales del mismo video; cambiar la extensión del nombre de archivo no convierte los formatos. La reproducción también depende de los códecs utilizados para video y audio dentro de un contenedor como MP4.

Reproducción automática y tamaño en móviles

Si necesita reproducción automática, compárela agregando autoplay muted a la etiqueta de video de apertura. Mantenga playsinline y los controles. Las preferencias del usuario, las políticas de ahorro de energía, el historial de interacción del sitio u otras reglas del navegador pueden denegar la reproducción automática, por lo que mantenga un botón de reproducción.

El CSS width: 640px es el ancho de visualización deseado, mientras que max-width: 100% limita el desbordamiento en un contenedor estrecho. height: auto preserva la proporción de aspecto del video. Si define un marco de proporción fija, object-fit: contain preserva toda la escena, mientras que cover llena el marco recortando algunos bordes; verifique que el contenido importante siga siendo visible.

Solucione problemas de reproducción y verifique la accesibilidad

• URL del archivo: Abra el enlace del video directamente y confirme que el archivo existe y está disponible sin iniciar sesión. Verifique que no se haya confundido una ruta local con una ruta del servidor, y que la capitalización del nombre del archivo coincida.
• Formato y respuesta: Verifique que el servidor envíe el tipo MIME correcto video/mp4 o video/webm y use códecs compatibles. El panel de Red en las herramientas de desarrollador ayuda a inspeccionar solicitudes fallidas y encabezados de respuesta.
• Reproducción automática: Si presionar Reproducir funciona, distinga una restricción de reproducción automática de un archivo dañado.
• Guía de respaldo: El texto dentro del video es para navegadores que no soportan el elemento. En navegadores modernos, un fallo de carga no lo muestra automáticamente como un mensaje de error. Por lo tanto, el ejemplo coloca también un enlace al archivo y la descripción de la escena fuera del reproductor.
• Subtítulos y descripciones: Proporcione subtítulos precisos y una transcripción donde sea necesario para el habla. Conecte los subtítulos con track y un archivo WebVTT. Considere una descripción de texto o una descripción de audio para la información esencial que se transmite únicamente de forma visual.

Consulte la referencia de video MDN para atributos y la guía de MDN sobre subtítulos de video para archivos de subtítulos.