Wiedergabe-/Pause-Button für Cover-Hintergrundvideos

Veröffentlicht: von Matze – Kommentar hinterlassen

Ein Video im Hintergrund deines Cover-Blocks kann die Barrierefreiheit beeinträchtigen, da du dessen Zustand nicht steuern kannst. Es wird normalerweise automatisch abgespielt und kann nicht gestoppt werden. Der Cover-Block verfügt jedoch standardmäßig nicht über solche Steuerungen.

Hintergrund zur Barrierefreiheit

Wie das WCAG-Erfolgskriterium 2.2.2 besagt:

Für alle sich bewegenden, blinkenden oder scrollenden Informationen, die (1) automatisch starten, (2) länger als fünf Sekunden dauern und (3) parallel zu anderen Inhalten präsentiert werden, gibt es eine Möglichkeit für den Benutzer, sie zu pausieren, zu stoppen oder zu verbergen, es sei denn, die Bewegung, das Blinken oder das Scrollen ist Teil einer Aktivität, bei der es wesentlich ist; […]

Um eine solche Lösung zu erreichen, ist ein Wiedergabe-/Pause-Button ein sogenannter „Toggle“-Button. Das bedeutet, es ist ein Button, der eine bestimmte Aktion beim Klicken aktiviert oder deaktiviert. Wenn die Aktion aktiviert ist, wird sie beim zweiten Klick auf den Button deaktiviert.

Dieser Toggle-Button sollte nicht nur das Video pausieren/wiedergeben, sondern auch den Status des Buttons ändern. Ein Toggle-Button verwendet das Attribut aria-pressed, um zu signalisieren, ob sein aktueller Status „aktiv“ oder „inaktiv“ ist.

Eine Lösung

Philip Roth kam mit einer Idee, wie man das mit einem solchen Toggle-Button und ein bisschen JavaScript lösen kann:
https://social.tchncs.de/@phillip/113317784082959086?kjy=spring
Und da mir seine Lösung gefällt, gibt es die nachfolgende Anleitung, wie man ein solches Ergebnis in WordPress erzielt (was auch ein wenig anders ist, wenn es um den Code geht).

JavaScript

Das Herz der Lösung ist ein JavaScript-Code, der einerseits das Video pausiert/abspielt und andererseits den korrekten Zustand des Buttons definiert. Zusätzlich wechsle ich auch eine Klasse für is-playing und is-paused am Button, die ich dann verwende, um den aktuellen Zustand zu überprüfen. Ich könnte allerdings auch einfach die aria-pressed-Eigenschaft überprüfen.

Am ENde sieht der Code so aus:

document.addEventListener( 'DOMContentLoaded', () => {
	const pauseButtons = document.querySelectorAll( '.my-video__button' );
	const togglePlayback = ( event ) => {
		const button = event.currentTarget;
		const screenReaderText = button.querySelector( '.screen-reader-text' );
		const video = button.closest( '.wp-block-cover' ).querySelector( '.wp-block-cover__video-background' );
		
		if ( button.classList.contains( 'is-playing' ) ) {
			video.pause();
			button.ariaPressed = true;
			button.classList.add( 'is-paused' );
			button.classList.remove( 'is-playing' );
			button.querySelector( 'use' ).setAttribute( 'href', '#play' );
			screenReaderText.textContent = myVideoPause.play;
		}
		else {
			video.play();
			button.ariaPressed = false;
			button.classList.add( 'is-playing' );
			button.classList.remove( 'is-paused' );
			button.querySelector( 'use' ).setAttribute( 'href', '#pause' );
			screenReaderText.textContent = myVideoPause.pause;
		}
	}
	
	for ( const pauseButton of pauseButtons ) {
		pauseButton.addEventListener( 'click', togglePlayback );
	}
} );
Code-Sprache: JavaScript (javascript)

Wie du möglicherweise bereits hier siehst, ändere ich auch das Attribut eines use-Elements, das ich verwende, um den Inhalt des Buttons von einem Pause-Icon zu einem Play-Icon zu ändern. Zusätzlich habe ich ein span mit einem Screenreader-Text, der zu einer Eigenschafts des Objekts myVideoPause geändert wird, das einer lokalisierten Zeichenfolge entspricht, die via wp_localize_script geladen wird.

Skript registrieren

Ich habe das Skript oben in meinem Theme unter /assets/js/video-pause.js gespeichert und zusätzlich eine minifizierte Version davon unter /assets/js/video-pause.min.js erstellt. Dann verwende ich diese Funktion, um es zu registrieren und zu lokalisieren:

/**
 * Register assets.
 */
static function my_register_assets(): void {
	$is_debug = \defined( 'WP_DEBUG' ) && \WP_DEBUG || \defined( 'SCRIPT_DEBUG' ) && \SCRIPT_DEBUG;
	$suffix = $is_debug ? '' : '.min';
	$path = \get_template_directory() . '/assets/js/video-pause' . $suffix . '.js';
	$url = \get_template_directory_uri() . '/assets/js/video-pause' . $suffix . '.js';
	
	\wp_register_script( 'my-video-pause', $url, [], (string) \filemtime( $path ), true );
	\wp_localize_script(
		'my-video-pause',
		'myVideoPause',
		[
			'pause' => \esc_js( \__( 'Pause video', 'textdomain' ) ),
			'play' => \esc_js( \__( 'Play video', 'textdomain' ) ),
		]
	);
}

\add_action( 'wp_enqueue_scripts', 'my_register_assets' );
Code-Sprache: PHP (php)

Jetzt weißt du auch, was myVideoPause.pause und myVideoPause.play ist (entweder „Pause video“ oder „Play video“).

Die eigentliche Einbindung des Skripts findet innerhalb des Block-Markups statt, da es nur eingebunden werden soll, wenn ein Cover-Block ein Hintergrundvideo besitzt.

Block-Markup

Das Einbinden des Skripts und Hinzufügen des eigentlichen Button-Elements kann über den Filter render_block_core/cover vorgenommen werden. Hier wird auch geprüft, ob der aktuelle Cover-Block überhaupt ein Hintergrundvideo besitzt.

/**
 * Set a pause button if the cover has a video background.
 * 
 * @param	string	$block_content Block content
 * @param	mixed[]	$block Block data
 * @return	string Updated block content
 */
static function my_set_pause_button( string $block_content, array $block ): string {
	if ( empty( $block['attrs']['backgroundType'] ) || $block['attrs']['backgroundType'] !== 'video' ) {
		return $block_content;
	}
	
	\wp_enqueue_script( 'my-video-pause' );
	
	$markup = '<div class="my-video__pause-play">
		<button class="my-video__button my-video__button--pause-play is-playing" type="button" aria-pressed="false">
			<svg class="my-video__button--icon" aria-hidden="true"><use href="#pause"></use></svg>
			<span class="screen-reader-text">' . \esc_html__( 'Pause video', 'textdomain' ) . '</span>
		</button>
	</div>';
	
	return \str_replace( '</video>', '</video>' . $markup, $block_content );
}

\add_filter( 'render_block_core/cover', 'my_set_pause_button' );
Code-Sprache: PHP (php)

Et voilà, am Ende hast du einen Button, um das Video zu pausieren/wiederzugeben, der die Barrierefreiheit für deine WordPress-Website verbessert.

Bitte bedenke noch, dass du den Button per CSS anpassen musst, damit er überhaupt klickbar ist. Dazu kannst du folgendes CSS verwenden und an deine Bedürfnisse anpassen:

.wp-block-cover {
	position: relative;
}

.my-video__button {
	background-color: rgba(255, 255, 255, .75);
	inset-block-end: 0;
	inset-inline-end: 0;
	line-height: 1;
	padding: 6px;
	position: absolute;
	width: auto;
	z-index: 10;
}

.my-video__button:focus,
.my-video__button:hover {
	background-color: #fff;
}

.my-video__button--icon {
	height: 24px;
	width: 24px;
}
Code-Sprache: CSS (css)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert