Sencillo post para repasar el atributo muted HTML5, su funcionalidad es la de silenciar los reproductores de vídeo y audio.
Otros post de HTML5 con información y ejemplos relevantes de vídeo y audio son:
- Atributo loop HTML5: Reproducción continua de vídeo y audio
- Atributo controls HTML5: Activar los controles en vídeo y audio
- Atributo autoplay HTML5: Reproducción automática de vídeo y audio
- Atributo poster HTML5: Establacer una imagen de preview en vídeos
- Atributo preload HTML5: Autocargar vídeos y audios
- Atributo mediagroup HTML5: Reproducción sincronizada de vídeo y audio
Sintaxis del atributo muted HTML5 para vídeo
Os voy a poner la sencilla sintaxis de este nuevo atributo para vídeo extraída de su web oficial:
|
1 2 3 |
<video width="600" height="400" controls muted> <source src="video.mp4" type="video/mp4"> </video> |
Tal y como se aprecia en el código superior solo hay que añadir el atributo muted para silenciar el reproductor de vídeo.
- Con <video> indicamos que vamos que se va a embeber un vídeo, podemos asignar un alto y ancho al reproductor.
- Con <source> especificamos la ruta del vídeo a reproducir.
- Con muted se silencia el vídeo.
- Es aconsejable usar el atributo controls para dar opción al usuario a poner de nuevo el volumen.
Os muestro en la siguiente imagen un player de vídeo HTML5 donde podemos apreciar el control de volumen:
Sintaxis del atributo muted HTML5 para audio
Os pongo la sintaxis en el caso del player de audio extraída de su web oficial:
|
1 2 3 4 |
<audio muted> <source src="014-audio-helicoptero.mp3" type="audio/mp3"> Tu navegador no soporta HTML5 audio. </audio> |
Tal y como se aprecia en el código superior con tan solo 2 etiquetas podemos crear el player de audio:
- Con <audio> indicamos que vamos que se va a embeber un audio.
- Con <source> especificamos la ruta del audio a reproducir.
- Con muted silenciamos el audio.
Ejemplos del atributo muted en vídeo y audio
Os pongo este ejemplo básico del atributo muted en vídeo:
|
1 2 3 4 |
<video width="640" height="360" controls muted> <source src="011-html5-video-golden_gate_bridge_timelapse_hd_stock_video.mp4" type="video/mp4"> Tu navegador no soporta la etiqueta HTML5 video. </video> |
Os explico el ejemplo superior:
- Tenemos la etiqueta video con los atributos height y width para dar las dimesiones del vídeo.
- Con el atributo controls mostramos los controles del player (play, pause, volumen…).
- En la etiqueta source establecemos la ruta (src) del vídeo a reproducir y definimos el tipo (video/mp4).
- Con el atributo muted haremos que el vídeo comience silenciado.
- En caso de que el navegador no soporte esta etiqueta mostramos un mensaje por pantalla.
Con este otro ejemplo de la etiqueta audio con muted vamos a ver cómo activar el la reproducción continua:
|
1 2 3 4 |
<audio controls muted> <source src="014-audio-helicoptero.mp3" type="audio/mp3"> Tu navegador no soporta HTML5 audio. </audio> |
Os explico el ejemplo superior:
- Con el atributo controls mostramos los controles del player (play, pause, volumen…).
- En la etiqueta source establecemos la ruta (src) del audio a reproducir y definimos el tipo (audio/mpeg).
- Con el atributo muted haremos que el audio comience silenciado.
- En caso de que el navegador no soporte esta etiqueta mostramos un mensaje por pantalla.