HTML/Tutorials/Multimedia/Hintergrundvideo

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Ein Videohintergrund, der das gesamte Browserfenster einnimmt, ist ein interessanter Effekt, den man nicht jeden Tag sieht. Der Hauptgrund dafür ist wahrscheinlich, dass man eine Filmdatei nicht mit background-image in CSS festlegen kann.

In diesem Kapitel lernen Sie, wie Sie ein Hintergrund-Video einrichten können, aber auch welche Fallstricke lauern, die Nutzern das Erlebnis (und damit Ihre Webseite, bzw. Ihr Produkt) verleiden können.

Vorüberlegungen

Multimedia-Effekte sollten nie zum Selbstzweck werden. Heutzutage sind Portalseiten, die erst durch einen Mausklick zu Inhalt und Navigation führten, aus der Mode gekommen. Trotzdem kann es Anwendungsfälle geben, in denen eine Landing Page oder Hero-Image-Webseite aus einer Grafik oder eben einem Film und einem kurzen Text besteht. Hier sollte der Film aber Teil des Inhalts und nicht nur Dekoration sein.

Deshalb sollten vorab einige Grundsätze aufgestellt werden:

  • Kein Ton. Zumindest in der Standardeinstellung. Opt-in-Sound ist akzeptabel.
  • Videos haben den größten Anteil am Datenvolumen einer Webseite. Ein Video unaufgefordert abzuspielen (und vorher herunterzuladen) kann auf Geräten mit niedriger Datenübertragungsrate zu Ruckeln, Frust und Seitenabbruch führen..
  • Halten Sie es zugänglich, indem der Text genug Kontrast zum Hintergrund-(Video) hat, um lesbar zu sein.

Anwendungsbeispiel

HTML5 Hintergrundvideo ansehen …
<video playsinline autoplay muted loop poster="https://wiki.selfhtml.org/images/c/c4/Ducks.jpg" id="bgvid">
  <source src="...video.webm" type="video/webm">
  <source src="...video.mp4" type="video/mp4">
</video>

Als Mediendatei verwenden wir einen Film über Enten auf der Donau, den ich bei Wikimedia Commons gefunden habe.[1]

Das video-Element enthält viele Attribute:

  • autoplay lässt die Mediendatei sofort abspielen.
    Beachten Sie: Dies lässt sich in vielen Browsern in den Einstellungen deaktivieren.
  • muted (engl. für stummgeschaltet) setzt die Lautstärke auf 0
  • playsinline gibt an, dass das Video in der Seite und nicht mit einem eigenen Player abgespielt wird. Dies startet in iOS Safari, wenn der Film entweder keine Tonspur hat oder muted ist.
  • loop gibt an, dass das Video in einer Endlosschleife gezeigt wird.
CSS für Vollbildanzeige ansehen …
video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

Das video-Element wird fest positioniert und auf die volle Viewportgröße skaliert. Die Größe muss nicht mit JavaScript ermittelt werden. Die Einheiten vh und vw fragen dies direkt im Browser mit CSS ab!

Content is King!

Nicht jeder möchte unser Video anschauen. Die Gründe dafür snd zahlreich.

Einschränkungen bei mobilen Daten

Nicht jeder hat für sein Smartphone eine Datenflatrate und überall LTE oder 5G. Deshalb verbietet es sich von selbst, das Video auf kleinen Geräten erst herunterladenzulassen, um es dann nur ruckelnd wiedergeben zu können.

Leider gibt es keine Medienabfrage für die Datenübertragungsrate (Bandwidth):[2] 

@media (min-bandwidth: 25Mbps) {
  /* High bandwidth, bring it on! */
}

@media (max-bandwidth: 10Mbps) {
  /* This is only for the viewers with currently slow internet connection speed */
}

Zukünftig wird es in Media queries Level 5 eine prefers-reduced-data-Abfrage geben.

Auch eine Abfrage, ob das Gerät ein hochauflösendes Display hat( resolution) oder mit Touch gesteuert werden kann (pointer), selektiert nicht zwingend mobile Geräte von anderen. Trotzdem ist es sinnvoll, eine Medienabfrage der Breite vorzunehmen und in diesem Falle das Video durch das Poster zu ersetzen.

Beispiel 
@media screen and (max-width: 50em {
    html {
         background: url(Ducks.jpg) #000 no-repeat center center fixed;
    }
    video {
        display: none;
    }
}

Da das Video-Element auf Bildschirmen mit einem Viewport von weniger als 50em Breite nicht angezeigt wird, erhält das html-Element unser Poster als Hintergrundgrafik.

prefers-reduced-motion

Das menschliche Auge richtet sich automatisch auf Bewegung aus. Was in der Natur und im Straßenverkehr oft hilfreich ist, kann vor dem Bildschirm für manche Nutzer zur Qual werden. Eine Vielzahl von nur zu Dekoration eingesetzten Animationen oder ungefragt abgespielte Videos können zu Irritation bis hin zur körperlichen Übelkeit (Motion-triggered vestibular spectrum disorder) führen.[3][4]

Mit der prefers-reduced-motion-Medienabfrage können Sie für solche Nutzer, die dies entsprechend im Betriebssystem eingestellt haben, eine bewegungsreduzierte Variante anbieten. Dies können Sie im CSS notieren:

Medienabfrage von prefers-reduced-motion 
@media screen and (prefers-reduced-motion: reduce) {
    html {
         background: url(Ducks.jpg) #000 no-repeat center center fixed;
    }
    video {
        display: none;
    }
}

Komfort mit JavaScript

prefers-reduced-motion heißt aber nicht, dass es gar keine Animation geben soll, sondern dass diese vom Nutzer gesteuert werden kann. Falls die Benutzereinstellung auf reduce gesetzt ist, soll ein Kontrollfeld den Player nach Benutzerwunsch einschalten.

In JavaScript können Sie dies mit matchMedia abfragen und entsprechend reagieren: 

window.matchMedia('prefers-reduced-motion: reduce')

window.matchMedia('(prefers-reduced-motion: reduce)')
Beachten Sie, dass die Medienabfrage auch die umschließenden Klammern umfasst. Sie müssen hier also doppelt notiert werden!


Hintergrundvideo mit Kontrollfeld ansehen …
<video>
  <source src="...video.webm" type="video/webm">
</video>

<div class="controls">
  <button id="play-pause">
    Play
  </button>
  <button id="mute" aria-pressed="true">Mute</button>

  <p>Wenn <b>prefers-reduced-motion</b> erkannt wird, spielt das Video nicht automatisch ab.</p>
</div>

Ich wollte dieses Kontrollfeld eigentlich mittels des hidden-Attributs ausblenden. Dies geht aber noch einfacher mit CSS:

Kontrollfeld mit Medienabfrage einblenden ansehen …
@media screen and (prefers-reduced-motion: reduce) {
	.controls {
		position: absolute;
		bottom: 2em;
		left: 2em;
	z-index: 10;		
	}
}

Das JavaScript enthält ebenfalls eine Medienabfrage, die dann die Steuerung über das Kontrollfeld aktiviert:

Medienabfrage von prefers-reduced-motion ansehen …
	const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)'),
	      buttn = document.getElementById('play-pause'),
	      video = document.querySelector('video'),
	      mute = document.getElementById('mute');
	let vState;
	console.log(motionQuery); 
	motionQuery.addEventListener('change', () => {
		reducedMotionCheck();
	});
	
	buttn.addEventListener('click', function () {
		if ( buttn.innerText == 'Play') {
			video.play();
			vState = '2';
			buttn.innerText = 'Pause';
		}
		else {
    	buttn.innerText = 'Play';
    	vState = '1'; console.log(vState);
    	video.pause();
		}
	});	

video.muted = true;

function reducedMotionCheck() { 
  if (motionQuery.matches) {
    buttn.innerText = 'Play';
    vState = '2'; console.log(vState);
    video.pause();
  }
  else {
    buttn.innerText = 'Pause';
    vState = '1';console.log(vState);
    video.play();		
  }
}

reducedMotionCheck();

Bei jedem Neuladen der Seite, bzw. Wechsel der Systemeinstellungen wird die Funktion reducedMotionCheck() aufgerufen, die dann das Video stoppt.

Bei einem Klick auf den Play-Button wird das Video gestartet und der Text des Buttons auf 'Pause' geändert. Bei einem erneuten Klick wird wieder pausiert und der Text zurück auf Play gesetzt.

Der mute-Button ist funktionslos, da das Video keinen Ton hat, kann aber problemlos nachgrüstet werden.

Fazit

Ein Hintergrundvideo ist ein nettes Gimmick und kann eine Webseite bereichern. Für Nutzer, die Animationen und Bewegungseffekte reduzieren möchten, ist das eingebaute Kontrollfeld eine willkommene Steuerung, die den Nutzern die Kontrolle über ihr Medienverhalten zurückgibt!

Siehe auch

SELF-Blog: [ Multimedia - Wie viel ist zu viel?] vom 01.08.2021

Weblinks

Quellen

  1. ↑ Wikimedia Commons: Chroicocephalus_ridibundus_video.webm
  2. ↑ css-tricks: Bandwidth Media Queries von Chris Coyier on Mar 28, 2012
  3. ↑ web.dev: prefers-reduced-motion: Sometimes less movement is more von Thomas Steiner, 10.12.2019
  4. ↑ Justus-Liebig-Universität: Das Vestibular-Syndrom
Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/Multimedia/Hintergrundvideo&oldid=81592“