HTML5

Atributo controls HTML5: Activar los controles en vídeo y audio

Sencillo post para repasar el atributo controls HTML5, su funcionalidad es la de activar los controles típicos de un player de vídeo y audio como: play, stop, volumen, barra de transición, pantalla completa…

Otros post de HTML5 con información y ejemplos relevantes de vídeo y audio son:

Sintaxis del atributo controls HTML5 para vídeo

Os voy a poner la sencilla sintaxis de este nuevo atributo para vídeo extraída de su web oficial:

<video width="600" height="400" controls>
    <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 controls para activar los controles:

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 controls activamos los controles del player.

Os muestro en la siguiente imagen un player de vídeo HTML5 con los controles activados y visibles:

Sintaxis del atributo controls HTML5 para audio

Os pongo la sintaxis en el caso del player de audio extraída de su web oficial:

<audio controls>
   <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 controls activamos los controles del player.

Ejemplo para activar los controles en vídeo y audio

Os pongo este ejemplo ejemplo básico de la etiqueta vídeo con el atributo controls:

<video width="640" height="360" controls>
   <source src="011-html5-video-golden_gate_bridge_timelapse_hd_stock_video.mp4" type="video/mp4">
   Tu navegador no soporta HTML5 video.
</video>

Os explico el ejemplo superior:

Tenemos la etiqueta 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).
En caso de que el navegador no soporte esta etiqueta mostramos un mensaje por pantalla.

Con este otro ejemplo de la etiqueta audio vamos a ver cómo activar los controles:

<audio controls>
   <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).
En caso de que el navegador no soporte esta etiqueta mostramos un mensaje por pantalla.