Aprende a integrar videos y audios en HTML5 con buenas prácticas, accesibilidad y rendimiento. Aquí verás cómo usar etiquetas, atributos clave y compatibilidad de formatos para que tus usuarios disfruten una experiencia fluida y confiable.
¿Cómo insertar videos HTML5 con controles y dimensiones?
Para empezar, la etiqueta <video> carga un archivo con el atributo src. Sin embargo, sin más atributos el video no tiene controles ni tamaño manejable. Agrega controles y dimensiones con los atributos adecuados.
<!-- Variante sencilla --> <video src="multimedia/video.mp4" controls width="600" height="400"></video>
Para mejorar la carga y la percepción del usuario, utiliza poster y preload:
<video controls width="600" height="400" poster="IMG/banner.jpg" preload="metadata"> <source src="multimedia/video.mp4" type="video/mp4"> <source src="multimedia/video.mov" type="video/mov"> Tu navegador no soporta formatos de video. </video>
¿Qué formatos y etiquetas usar para compatibilidad?
No todos los navegadores soportan lo mismo. MP4 tiene amplio soporte; MOV no en todos; WebM suele estar bien soportado. La estrategia es delegar al navegador con múltiples <source> y type correcto.
¿Cómo reproducir audio con controles y múltiples formatos?
La etiqueta <audio> funciona de forma similar a <video>. Sin controles, el audio puede no ser visible (por estilos como display: none). Agrega controls para mostrar el reproductor y usa preload según necesidad de datos.
<audio controls preload="none"> <source src="multimedia/audio.mp3" type="audio/mpeg"> Tu navegador no soporta audio HTML5. </audio>
¿Cómo cuidar la experiencia del usuario y el rendimiento?
¿Cómo embeber videos de YouTube con iframe y parámetros útiles?
YouTube ofrece un código de insertar desde Compartir > Embeber. Ese iframe trae atributos clave para accesibilidad y control del reproductor. Puedes indicar el segundo de inicio con el parámetro start.
<iframe src="https://www.youtube.com/embed/VIDEO_ID?start=60" title="Título descriptivo del video" frameborder="0" allow="autoplay; accelerometer" allowfullscreen> </iframe>
¿Qué buenas prácticas conviene aplicar?
¿Tienes dudas sobre iframe, preload o formatos como MP4, MOV u OGG? Comparte tu pregunta y cuéntame qué caso de uso quieres resolver.
Aprende a integrar videos y audios en HTML5 con buenas prácticas, accesibilidad y rendimiento. Aquí verás cómo usar etiquetas, atributos clave y compatibilidad de formatos para que tus usuarios disfruten una experiencia fluida y confiable.
Para empezar, la etiqueta <video> carga un archivo con el atributo src. Sin embargo, sin más atributos el video no tiene controles ni tamaño manejable. Agrega controles y dimensiones con los atributos adecuados.
<!-- Variante sencilla -->
<video src="multimedia/video.mp4" controls width="600" height="400"></video>
Para mejorar la carga y la percepción del usuario, utiliza poster y preload:
<video controls width="600" height="400" poster="IMG/banner.jpg" preload="metadata">
<source src="multimedia/video.mp4" type="video/mp4">
<source src="multimedia/video.mov" type="video/mov">
Tu navegador no soporta formatos de video.
</video>
No todos los navegadores soportan lo mismo. MP4 tiene amplio soporte; MOV no en todos; WebM suele estar bien soportado. La estrategia es delegar al navegador con múltiples <source> y type correcto.
La etiqueta <audio> funciona de forma similar a <video>. Sin controles, el audio puede no ser visible (por estilos como display: none). Agrega controls para mostrar el reproductor y usa preload según necesidad de datos.
<audio controls preload="none">
<source src="multimedia/audio.mp3" type="audio/mpeg">
Tu navegador no soporta audio HTML5.
</audio>
YouTube ofrece un código de insertar desde Compartir > Embeber. Ese iframe trae atributos clave para accesibilidad y control del reproductor. Puedes indicar el segundo de inicio con el parámetro start.
<iframe
src="https://www.youtube.com/embed/VIDEO_ID?start=60"
title="Título descriptivo del video"
frameborder="0"
allow="autoplay; accelerometer"
allowfullscreen>
</iframe>
¿Tienes dudas sobre iframe, preload o formatos como MP4, MOV u OGG? Comparte tu pregunta y cuéntame qué caso de uso quieres resolver.
Descubri esta pagina que tiene videos e imagenes de stock con la cual pueden suplir la falta de archivos de video para esta clase, solo deberian descargar el video y convertirlo al formato que deseen.
No es publicidad, no tengo nada que ver con ellos, solo que me puse a buscar como seguir la clase sin los videos.
Si ponen
width="100%"
El ancho del video se adapta al tipo de pantalla, el peso es el mismo, aclaro, no cambia la resolucion, pero si sirve para que tenga una vista responsive.
solo esta el audio dentro de la carpeta multimedia, no estan los videos
No me deja insertar videos de youtube. Me dice:
Mirar el video en YouTube Error 153 Error de configuración del reproductor de video
Probé con varios videos y no logro hacerlo andar.
Para comentar en Windows:
Hermosa clase con el atributo poster 💚
Como al profe se le olvido subir los archivos de video al github, lo que hice para tener algun ejemplo para trabajr fue pedircelo a chatgpt
Qué es comentar? cómo se hace y para que sirve?
Comentar es dejar notas en tu código que el navegador ignora, pero que tú y tus colegas agradecerán cuando vuelvan a leerlo meses después. En HTML se hace envolviendo el texto con <!-- -->.
Sirve para documentar, explicar lógica compleja o desactivar partes temporalmente sin borrar nada. Si tuvieras que explicarle a alguien por qué pusiste un atributo específico en tu etiqueta <video>, ¿dónde lo pondrías para que sea útil sin afectar la reproducción?
Para aquellos que deseen probar con imágenes mas profesionales y sin derechos de autor. Les recomiendo la página de Pixabay y Pexels.
hay videos e imágenes de todo tipo, hasta música pueden encontrar. Eso me sirvió para practicar en esta clase.
Muchas gracias, justo la use hace poco!