Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


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:

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:

atributo controls HTML5

Sintaxis del atributo controls HTML5 para audio

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

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 de la etiqueta HTML5 audio

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:

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:

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.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies