piapia123
es

Generador de la etiqueta video de HTML5

Web

Todo se ejecuta en tu navegador: no se sube nada

Entrada
Arrastra un archivo aquí para cargarlo
Resultado

Una `<video>` que funciona es más que un `src`. Esta herramienta reúne varias entradas `<source>` (para que un mismo video ofrezca mp4 y webm y el navegador elija lo que pueda reproducir), una imagen de póster, un subtítulo `<track>`, `preload` y los interruptores habituales en una etiqueta lista para pegar, y explica cada atributo. En particular, avisa cuando autoplay está activo pero muted no — los navegadores modernos bloquean la reproducción automática con sonido, así que esa etiqueta parece correcta pero lo más probable es que no se mueva.

Funciones

  • Una URL por línea se convierte en un <source> cada una
  • Deduce el type de la extensión (video/mp4, video/webm y demás)
  • Ancho y alto opcionales; 0 deja que decida el diseño
  • Imagen de póster y pista de subtítulos
  • preload en tres modos: none, metadata, auto
  • Interruptores para controls, loop y playsinline
  • ⚠️ Avisa cuando autoplay no lleva muted y será bloqueado
  • Los valores de los atributos se escapan para que unas comillas no cierren la etiqueta antes de tiempo

Cómo se usa

  1. Escribe una URL de video por línea (varias líneas para varios formatos)
  2. Ajusta el ancho, el póster, preload y los interruptores
  3. Marca la opción de subtítulos y da una URL .vtt y un idioma
  4. Copia la etiqueta generada en tu página

Preguntas frecuentes

¿Por qué autoplay sigue sin reproducirse?
Los navegadores modernos bloquean la reproducción automática con sonido. Para que `autoplay` funcione casi siempre hace falta `muted` también, y luego el usuario vuelve a activar el sonido. La herramienta te avisa cuando autoplay está activo y muted no, para que no publiques una etiqueta que no se moverá.
¿Por qué ofrecer varias fuentes?
Los navegadores no coinciden en los códecs que admiten (Safari prefiere mp4; Chrome y Firefox también leen webm). Ofrecer dos formatos para el mismo video deja que el navegador tome el primero que pueda reproducir, ampliando la compatibilidad. Varias líneas de entrada se convierten en varias entradas `<source>`.
¿De dónde sale el type?
Se deduce de la extensión (`.mp4` pasa a video/mp4, `.webm` a video/webm, etc.). Una extensión no reconocida omite `type` para que decida el navegador, en lugar de adivinar uno que puede estar mal.

Herramientas relacionadas

Reproductor de música

Web

Convierte unas líneas de URL de audio en un reproductor autocontenido: audio nativo y lista, sin dependencias ni compilación.

Código de ventana

Web

Genera código window.open o un enlace target="_blank", con tamaño y posición ajustables, y explica qué parámetros ignoran ya los navegadores.

HTML ↔ JS

Web

Escapa HTML a un literal de cadena JS —comillas, saltos de línea y un `</script>` partido— o deshaz el escape y recupera HTML legible.

Analizador de URL

Web

Descompone una URL en esquema, host, puerto, ruta, parámetros y ancla, con cada parámetro en crudo y decodificado. Todo en tu navegador.

Analizador de UA

Web

Analiza un User-Agent: navegador, versión, sistema, tipo de dispositivo y motor, con las reglas que coinciden. Solo coincidencia de patrones.

Códigos de estado HTTP

Web

Consulta un código de estado HTTP: significado, clase 1xx–5xx, usos típicos y trampas habituales. También busca por palabra clave. Todo local.

← Volver a todas las herramientas