HTML5

Atributo preload HTML5: Autocargar vídeos y audios

Sencillo post para repasar el atributo preload HTML5, su funcionalidad es la iniciar automáticamente la carga del vídeo y audio para ir almacenándolo en el bufer para que la reproducción no sufra cortes.

Otros post de HTML5 con información y ejemplos relevantes de son:

Sintaxis del atributo preload 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 preload>
    <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 preload para que la carga del vídeo comience desde que se carga la página:

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 preload iniciamos la descarga y almacenamiento en el bufer del vídeo.
Es aconsejable usar el atributo controls para dar opción al usuario a poner de nuevo el volumen.

Sintaxis del atributo preload HTML5 para audio

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

<audio preload>
   <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 preload iniciamos la descarga y almacenamiento en el bufer del audio.

Ejemplos del atributo preload en vídeo y audio

Os pongo este ejemplo del atributo preload en vídeo:

<video width="640" height="360" controls preload>
   <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 preload precargamos en el bufer el vídeo.
En caso de que el navegador no soporte esta etiqueta mostramos un mensaje por pantalla.

Con este otro ejemplo de la etiqueta audio con atributo preload vamos a ver cómo precargar el audio antes de su reproducción:

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