HTML5

Atributo loop HTML5: Reproducción continua de vídeo y audio

Sencillo post para repasar el atributo loop HTML5, su funcionalidad es la de permitir la reproducción continua de vídeo y audio sin pausas ni interrupciones.

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

Sintaxis del atributo loop 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" loop>
    <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 loop para activar la reproducción continua 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 loop activamos dicha reproducción continua.

Os muestro en la siguiente imagen un player de vídeo HTML5:

Sintaxis del atributo loop HTML5 para audio

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

<audio loop>
   <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 loop activamos la reproducción continua.

Ejemplos de loop en vídeo y audio

Os pongo este ejemplo básico del atributo loop en vídeo:

<video width="640" height="360" controls autoplay loop>
   <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 autoplay especificamos que el vídeo se reproduzca automáticamente.
Con el atributo loop establecemos la reproducción continua.
En caso de que el navegador no soporte esta etiqueta mostramos un mensaje por pantalla.

Con este otro ejemplo de la etiqueta audio con loop vamos a ver cómo activar el la reproducción continua:

<audio controls autoplay loop>
   <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 autoplay especificamos que el audio se reproduzca automáticamente.
Con el atributo loop establecemos la reproducción continua.
En caso de que el navegador no soporte esta etiqueta mostramos un mensaje por pantalla.