HTML5

Atributo mediagroup HTML5: Reproducción sincronizada de vídeo y audio

Nueva entrada para repasar el atributo mediagroup HTML5, su funcionalidad es la de sincronizar la reproducción de los diferentes elementos agrupados con este atributo.

Estos elementos pueden ser vídeo o audio. Otros post sobre HTML5 con información y ejemplos relevantes de son:

Sintaxis del atributo mediagroup HTML5

Veamos la sintaxis de este atributo extraído de su web oficial:

<video src="rutavideo.mp4" mediagroup="sincronismo"></video>

Como podéis apreciar la sintaxis es sencilla, solo tenemos que añadir el atributo y asignarle un nombre, todos los elementos vídeo o audio que lleven el mismo nombre en el atributo mediagroup sincronizarán su reproducción.

Así que, podemos sincronizar vídeo con vídeo, vídeo con audio o audio y audio. Con el comienzo de uno se reproducen todos los demás y mismo comportamiento cuando uno se detiene.

Ejemplo del atributo mediagroup HTML5

Todavía está pendiente la adaptación en la mayoría de navegadores pero os dejo este ejemplo del atributo mediagroup:

<video width="640" height="360" controls autoplay mediagroup="agrupador">
   <source src="/demos/2016/011-html5-video-golden_gate_bridge_timelapse_hd_stock_video.mp4" type="video/mp4">
   Tu navegador no soporta HTML5 video.
</video>
<video width="640" height="360" controls autoplay mediagroup="agrupador">
   <source src="/demos/2016/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 los 2 vídeos con sus atributos height y width para darles tamaño. Con el atributo controls activamos la barra de control y con autoplay indicamos que comiencen a reproducirse al cargar la página.
En ambos tenemos el atributo mediagroup con valor = ‘agrupador’, esto hace que los 2 vídeos comiencen a reproducirse simultáneamente sin desfases temporales.