Background Videos on Low Power Mobile Devices

Das lässt sich heutzutage natürlich einfach mit hochkomprimierten H264 Videos im .MP4 Format lösen. Einzig das automatische abspielen dieser Videos macht manchmal Probleme.

Besonders auf Mobilgeräten - und noch mehr wenn diese im Energiesparmodus sind - ist das schwierig. Nach mühsamer Recherche zu der Thematik bin ich aber auf eine Lösung gestoßen.

Lösung

Der Lösungsansatz scheint zwar umständlich, aber löst das automatische Abspielen von Hintergrundvideos mit nur einem kleinen Kompromiss (den man leider nicht umgehen kann): Im Energiesparmodus von Mobilgeräten braucht es einen Input der User:innen. Das heißt ein klitzkleines Scrollen oder berühren des Bildschirmes. Abgesehen davon funktioniert es in allen anderen Situationen komplett automatisch.

HTML

Hier der Code auf den wir alle gewartet haben. In Kombination mit etwas Javascript kommen wir so zum Ergebnis. Witzigerweise aktivieren wir autoplay nicht. Ganz wichtig! Das wird das Skript danach verlässlich lösen.

<!-- fs-richtext-ignore --><video loop muted playsinline style="position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover;" src="video.mp4" type="video/mp4"></video>

Javascript

Javascript übernimmt alle Autoplay-Funktionen der Backgroundvideos unserer Website. Vor dem "closing body tag" </body> dieses Script einfügen und fertig!

<!-- fs-richtext-ignore --><script>
//autoplay on low power mobile, disable autoplay in html first
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
});
document.body.addEventListener("click", playVideoOnLowPower);
document.body.addEventListener("touchstart", playVideoOnLowPower);
document.addEventListener("DOMContentLoaded", playVideoOnLowPower);
function playVideoOnLowPower(){
try{
const videoElements = document.querySelectorAll("video");
for (i = 0; i < videoElements.length; i++) {
if (videoElements[i].playing) {
// video is already playing so do nothing
console.log('Playing');
}
else {
// video is not playing so play video now
videoElements[i].play();
console.log('Not Playing');
}
}
}
catch(err) {
console.log(err);
}
}
</script>

Erklärung

Wenn man sich um alles kümmert - das abzuspielende Video stummschaltet, Autoplay und andere HTML Tags zum reibungslosen Abspielen hinzufügt - stößt man letztlich immer noch auf das Problem, dass Handys im Energiesparmodus die Videos nicht automatisch abspielen und einen großen hässlichen Playbutton draufhauen. Für Hintergrundvideos absolut unpassend.

Daher braucht es die oben genannte Lösung bis die Webdesign Community auf einen gemeinsamen Nenner kommt und Backgroundvideos richtig unterstützt.

Referenz

Auf die Lösung bin ich durch den Blog von Shakti Cheema gekommen. In diesem Blogeintrag schreibt er über die oben beschrieben Lösung.