Signatur
Beschreibung
Die Eigenschaft mediaGroup spiegelt das Inhaltsattribut mediagroup eines Medienelements wider. Sie ist also ein Attribut, das Lesen und Schreiben erlaubt. Elemente mit demselben Gruppennamen im selben Dokument sollten automatisch einen gemeinsamen MediaController bekommen. So hätten sie synchron abgespielt, pausiert und gespult werden können. Ein typisches Beispiel ist ein Video mit einer zweiten Tonspur, etwa für Audiodeskription, oder mit einem Gebärdensprach-Video.
Das Konzept kam zusammen mit der MediaController-Schnittstelle in die HTML-Spezifikation. Mit ihr wurde es aber auch wieder entfernt. Nur ältere WebKit- und Chromium-Versionen haben es zeitweise umgesetzt. In aktuellen Browsern ist mediaGroup meist undefined. Das Setzen des Attributs hat dort keine Wirkung.
In neuem Code sollten Sie mediaGroup nicht verwenden. Synchronisieren Sie mehrere Medienelemente stattdessen selbst: Werten Sie die Ereignisse play, pause und seeked aus und gleichen Sie currentTime ab. Alternativ können Sie Audio über die Web Audio API zusammenführen oder mehrere Spuren in einer einzigen Mediendatei ausliefern, etwa über audioTracks oder videoTracks.
Rückgabewert
mediagroup. Ist das Attribut nicht gesetzt, ist der Wert eine leere Zeichenkette. In Browsern ohne Unterstützung, also allen aktuellen, ist er undefined.Beispiele
Unterstützung prüfen
const video = document.createElement('video');
// Prüfen, ob der Browser die Eigenschaft überhaupt kennt
const supportsMediaGroup = 'mediaGroup' in video;
console.log('mediaGroup unterstützt:', supportsMediaGroup);
console.log('Wert:', video.mediaGroup);Gruppennamen lesen und setzen (historische Nutzung)
// <video id="main" src="film.mp4" mediagroup="film"></video>
// <audio id="ad" src="audiodeskription.mp3" mediagroup="film"></audio>
const main = document.querySelector('#main');
const ad = document.querySelector('#ad');
if ('mediaGroup' in main) {
console.log(main.mediaGroup); // "film"
ad.mediaGroup = 'film'; // gemeinsamer MediaController
console.log(main.controller === ad.controller);
} else {
// Das Attribut ist weiterhin per DOM lesbar, aber ohne Funktion
console.log(main.getAttribute('mediagroup'));
}Moderner Ersatz: zwei Medien manuell synchronisieren
const syncMedia = (leader, follower) => {
leader.addEventListener('play', () => {
follower.currentTime = leader.currentTime;
follower.play().catch(console.error);
});
leader.addEventListener('pause', () => follower.pause());
leader.addEventListener('seeked', () => {
follower.currentTime = leader.currentTime;
});
leader.addEventListener('ratechange', () => {
follower.playbackRate = leader.playbackRate;
});
// Auseinanderlaufen regelmäßig korrigieren
leader.addEventListener('timeupdate', () => {
if (Math.abs(follower.currentTime - leader.currentTime) > 0.3) {
follower.currentTime = leader.currentTime;
}
});
};
syncMedia(document.querySelector('#main'), document.querySelector('#ad'));// Wichtig · Fallstricke
- Veraltet:
mediaGroupundMediaControllerwurden aus dem HTML Living Standard entfernt. Chrome hat sie um Version 36 entfernt, Safari hat sie ebenfalls abgebaut. Firefox hat sie nie unterstützt. - In aktuellen Browsern wird das HTML-Attribut
mediagroupzwar im DOM gespeichert und ist übergetAttribute()lesbar. Es hat aber keinerlei Wirkung auf die Wiedergabe. - Prüfen Sie die Unterstützung immer mit
'mediaGroup' in element. Verlassen Sie sich nicht darauf, dass Elemente automatisch synchron laufen. - Bei manueller Synchronisierung bleibt eine Abweichung von einigen zehn Millisekunden. Für exakt synchrones Audio ist die Web Audio API besser geeignet.
- Autoplay-Richtlinien gelten für jedes Element einzeln.
play()auf dem folgenden Element kann deshalb ohne Nutzerinteraktion abgelehnt werden.