Stummschalten mit HTMLMediaElement.volume
Bei dem A1Click Kundenprojekt stieß ich auf folgende Herausforderung: Der Ton eines automatisch laufenden Hintergrundvideos soll anfangs stumm, jedoch per Klick wieder laut geschalten werden.
Projektziel der A1Click
Im laufenden Kundenprojekt der A1 entwickeln wir Lösungen agil weiter. Wir lösten im eingesetzten CMS Statamic eine eigenständige Komponente für Videos heraus. Dieses Video sollte nun funktional mit Stummschaltung, Autoplay und Play/Pause erweitert werden.
Der A1Click Tech Stack
Nutzung des CMS Statamic als unkomplizierte Wordpress Alternative
AlpineJS zur komponentenbasierten Erweiterung um Dynamik
Hier ist der HTML Ausschnitt des Hintergrundvideos:
1<video class="lg:max-h-[36.25rem] rounded-lg max-h-min w-min cursor-pointer object-contain object-top" autoplay playsinline preload="metadata">2 <source src="/assets/products/video.mp4" type="video/mp4">3</video>Meine anfängliche sehr simpel gedachte Lösung, das HTML Attribut "muted" per Klick zu "togglen", stellte sich als Initialgedanke für diesen neuen Blogpost heraus.
1const backgroundVideo = document.querySelector(".background-video");2 3backgroundVideo.setAttribute("muted", "");Problem mit dem HTML-Attribute Mute
Nachdem die beiden HTML Attribute "muted" und "autoload" hinzugefügt waren, sprich das Video automatisch stumm abgespielt wurde, wurde das Attribute "muted" trotz Klicks nicht im HTML Code entfernt.
Nach der Suche mehrerer möglicher Fehlerquellen und einem kurzem Nachbau auf CodePen ... reproduziert sich das gleiche Fehlverhalten.
Der Lösungsansatz
Nach kurzer Absprache mit meinem Team-Kollegen kamen wir auf folgenden Gedanken: Anstatt das Attribute "muted" zu nutzen, setzen wir auf die Regelung der Lautstärke über die Property HTMLMediaElement.volume und spielen die Stummschaltung durch Lautstärke Regelung nach.
1const backgroundVideo = document.querySelector('.background-video');2 3function stopVolume() {4 backgroundVideo.volume = 0;5},6 7function resumeVolume() {8 backgroundVideo.volume = 1;9}Fazit
Mit der Property HTMLMediaElement.volume lässt sich neben der Lautstärke Regelung auch problemlos das Stummschalten nachspielen. Nach erfolgreicher Implementierung sieht das Ergebnis wie folgt aus.