Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.
Siguiendo con las entradas que explican las etiquetas HTML que en mi punto de vista considero las más versátiles y complejas, ahora veremos unas etiquetas que permiten mostrar contenido multimedia a nuestra web mediante videos y audios de distintos formatos:
- MP4
- WebM
- Ogg
- MP3
- Ogg
- Wav
Esto último es lo que realmente las hace especial y esto se debe a que cada navegador soporta algunos de los formatos navegador listados anteriormente.
Una de los grandes características que trae HTML5 consigo es la inclusión de contenido multimedia como audios y vídeos.
Primero hablaremos sobre la etiqueta <video>; como veremos en esta entrada, ambas etiquetas (<video> y <audio>) tienen comportamientos, definiciones y atributos parecidos y de ahí el porqué de escribir una sola entrada para ambas etiquetas.
1.0 La etiqueta <video>
Para poder emplear la etiqueta <video> esta debe estar acompañada de algunos atributos y otras etiquetas hijas como veremos a continuación.
1.1 Atributos para cargar un vídeo
Se emplean los atributos width y height para especificar el ancho y largo que queramos que tenga el vídeo.
Además podemos especificar el atributo controls para indicar que muestre los controles como pausa, reproducción, volumen...:
Y el atributo src para indicar la URL fuente (vídeo).
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Tu navegador no soporta la etiqueta video.
<video>En el código HTML anterior especificamos el mismo vídeo en dos formatos diferentes para que pueda ser visualizado en los navegadores con soporte de vídeo MP4 y OGG; además se especifica que el vídeo espacio de visualización del vídeo será de 320x240 píxeles y que presente controles.
Lo ideal es agregar el mayor número de formatos para garantizar la reproducción en los navegadores.
En el caso de que sea un navegador anticuado como Internet Explorer 8 se mostraría el siguiente mensaje:
"Tu navegador no soporta la etiqueta video."
En el siguiente enlace verás una tabla con los formatos de video soportados por navegador: HTML <video> Tag.
1.2 Otros atributos de la etiqueta <video>
| autoplay | Especifica el inicio del vídeo tan pronto se cargue. |
| loop | Especifica que el vídeo se reproducirá nuevamente al terminar su reproducción. |
| muted | Especifica que el vídeo no reproducirá el audio (mudo). |
Puedes ver el resto de los atributos en el siguiente enlace: HTML <video> Tag.
2.0 La etiqueta <audio>
Ya entendida el funcionamiento del elemento anterior, ahora vamos con la etiqueta <audio> la cual presenta un especificaciones similar al de la etiqueta <video> (aparte de cargar audios en vez de vídeos); también cuenta con múltiples soportes de audio dependiendo del navegador los cuales puedes ver en el siguiente enlace: HTML Tag
La etiqueta <audio> también cuenta con los mismos atributos vistos anteriormente y se deben de especificar al menos un audio:
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta la etiqueta audio.
</audio>
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter
