HTML
Cómo integrar audio y video nativos con múltiples fuentes, controles, subtítulos y pistas de texto mediante audio, video, source y track.
y integran medios con controles nativos, múltiples fuentes y pistas de texto sincronizadas.
audiovideo<video controls preload="metadata" poster="poster.webp">
<source src="demo.webm" type="video/webm">
<source src="demo.mp4" type="video/mp4">
<track
kind="captions"
src="demo-es.vtt"
srclang="es"
label="Español"
default
>
Tu navegador no puede reproducir el video.
</video><video controls>Proporciona controles nativos para reproducir, pausar, volumen, seek y fullscreen según navegador.
Si ocultas controls y construyes controles propios, debes implementar teclado, nombres, estados, foco, rangos y compatibilidad.
<video autoplay muted playsinline>Los navegadores suelen bloquear autoplay con audio. Incluso muted puede ser molesto, consumir datos y afectar usuarios con sensibilidad al movimiento.
No reproduzcas contenido esencial sin control de pausa.
<video muted>Define estado inicial sin audio. No equivale a que el recurso carezca de pista sonora.
<video loop>Reinicia automáticamente. Evítalo en contenido largo o que distraiga. Animaciones repetitivas necesitan considerar preferencias de movimiento y controles.
<video playsinline>Sugiere reproducción dentro del layout en dispositivos que históricamente abrían fullscreen.
Valores:
none: no precargar intencionalmente.metadata: obtener duración y metadata.auto: permitir precarga mayor.Es una pista, no una orden. El navegador considera red y políticas.
<video controls preload="metadata">Suele ser un equilibrio razonable para videos no críticos.
<video poster="domisys-poster.webp">Muestra una imagen antes de reproducir. Necesita calidad, dimensiones y contraste adecuados; no tiene atributo alt propio.
El contexto, caption o texto cercano debe identificar el video.
<source src="demo.webm" type="video/webm">
<source src="demo.mp4" type="video/mp4">El navegador prueba fuentes en orden según soporte declarado y real.
type evita descargar recursos incompatibles, pero el servidor debe enviar un Content-Type correcto.
<audio controls preload="metadata">
<source src="episode.ogg" type="audio/ogg">
<source src="episode.mp3" type="audio/mpeg">
</audio>Proporciona transcripción para contenido hablado cuando sea relevante.
<track
kind="captions"
src="captions-es.vtt"
srclang="es"
label="Español"
default
>Utiliza WebVTT y puede proporcionar:
subtitles: traducción del diálogo.captions: diálogo y sonidos relevantes para personas sordas o con pérdida auditiva.descriptions: descripciones de video.chapters: navegación por capítulos.metadata: datos para scripts, no mostrados normalmente.Subtitles asumen que el usuario escucha los demás sonidos. Captions incluyen información como:
[suena una alarma]
[música suave]No los uses como sinónimos si la pista cumple una función accesible distinta.
srclang="es"
label="Español"Permiten identificar idioma y mostrar una opción comprensible.
default debe aparecer en una pista apropiada; varias pistas default crean ambigüedad.
Contenido dentro de video/audio se muestra en navegadores sin soporte:
<video controls>
<source src="demo.mp4" type="video/mp4">
<p>
<a href="demo.mp4">Descargar el video</a>.
</p>
</video>No es una alternativa completa para usuarios cuyo navegador soporta video pero no puede percibir el contenido. Captions, transcripción y audio description resuelven necesidades distintas.
WNC0
Beneficia accesibilidad, búsqueda y consumo en ambientes sin audio.
Indica cuando no contiene sonido si eso evita confusión:
<p>El siguiente video no contiene audio.</p><video width="1280" height="720" controls>Ayudan a reservar espacio. CSS puede ajustar el tamaño responsivo.
Recursos de otro origen, tracks, canvas y manipulación mediante JavaScript pueden requerir headers CORS y crossorigin.
<video crossorigin="anonymous" controls>El atributo no concede permiso; el servidor debe responder correctamente.
Atributos como disablepictureinpicture o disableremoteplayback restringen capacidades en navegadores compatibles. No desactives funciones útiles sin una razón de contenido, privacidad o licencia.
<figure>
<video
controls
preload="metadata"
poster="domisys-demo-poster.webp"
width="1280"
height="720"
>
<source src="domisys-demo.webm" type="video/webm">
<source src="domisys-demo.mp4" type="video/mp4">
<track
kind="captions"
src="domisys-demo-es.vtt"
srclang="es"
label="Español"
default
>
</video>
<figcaption>Demostración de los flujos principales de DomiSys.</figcaption>
</figure>¿Por qué subtítulos no sustituyen siempre a captions?
Porque los subtítulos suelen representar diálogo para quien puede oír los demás sonidos; captions también comunican sonidos relevantes e identificación de hablantes.
iframe, embed y object integra documentos externos y explica sus límites de seguridad.