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


Todos los atributos de vídeo HTML5 y sus funcionalidades

En este nuevo post vamos a ver los atributos de vídeo HTML5 que podemos usar en nuestros desarrollos para controlar nuestros vídeos.

Otros post de HTML5 con una temática similar son:

atributos de vídeo HTML5

Todos los atributos de vídeo HTML5

Vamos con el listado de los atributos de vídeo HTML5 que son casi los mismos que los de audio en HTML5:

  • autoplay: Con este atributo se especifica que el vídeo comience automáticamente a reproducirse. Se puede especificar de estas 2 maneras autoplay=”autoplay” o autoplay.
  • preload: En caso de omisión su valor es “auto”. Sirve para especificar si queremos que el vídeo se vaya cargando independientemente si se da al play o no. Aumentaría el consumo de ancho de banda pero el usuario tendría menos cortes en la reproducción. Tenemos 3 posibles valores para este atributo:
    — preload = “none”: El vídeo no comienza a descargarse hasta que el usuario haga play.
    — preload = “metadata”: Solo se cargan los metadatos del vídeo (dimensiones, primer frame, duración…).
    — preload = “auto”: El vídeo se descarga independientemente de la ejecución del play.
  • controls: Con este atributo especificamos si se muestran los típicos controles del vídeo (play, stop, volumen…). Tiene 2 posibles sintaxis: controls=”controls” o controls.
  • loop: Especifica la reproducción continua del vídeo, es decir, una vez acabada la reproducción comienza de nuevo a reproducirse. Tiene 2 posibles sintaxis: loop=”loop” o loop.
  • poster: URL de la imagen a mostrar cuando el vídeo no está disponible, está cargando y no ha comenzado su reproducción. Por defecto es el primer frame del vídeo.
  • height y width: El alto y ancho del vídeo para mostrarse en la web.
  • muted: Funcionalidad para quitar el volumen al vídeo.
  • mediagroup: Establece un grupo de reproducción al que pertenece el vídeo.
  • ‘src’ de la etiqueta source: URL/path del vídeo a reproducir.

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