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:

• Atributo controls HTML5: Activar los controles en vídeo y audio
• Atributo preload HTML5: Autocargar vídeos y audios
• Atributo poster HTML5: Establacer una imagen de preview en vídeos

Sintaxis del atributo mediagroup HTML5

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

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:

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.