https://www.hotel-schoepf.com/wp-content/themes/astra-child-samera/js/video-element-play-button.js

1document.addEventListener('DOMContentLoaded', function () {
2	playPauseButtons();
3});
4
5
6/**
7 * Loops through all Video Buttons and adds the functionality to play/Pause Videos
8 */
9function playPauseButtons() {
10	const videoButtons = document.querySelectorAll('[data-video-button]');
11	videoButtons.forEach(function (button) {
12
13		const video = connectButtonAndVideo(button);
14		if (video !== false) {
15			setA11yAttributeLabelOnButton(button);
16			addEventListenerToPlayButton(button, video);
17			updateButtonStateOnVideoStateChange(button, video);
18		}
19
20	});
21}
22/**
23 * Connects the button and video that belong together
24 * @param {HTMLElement} button 
25 * @returns {HTMLElement | false} video
26 */
27function connectButtonAndVideo(button) {
28	const prevElement = button.previousElementSibling;
29	if (prevElement.classList.contains('vjs-v8')) {
30		// video uses vjs player
31		const video = prevElement.querySelectorAll('video')[0];
32		setA11yAttributeControls(button, video);
33		return video;
34	}
35	if (button.getAttribute('aria-controls') !== null && button.getAttribute('aria-controls').length !== 0) {
36		// connected with aria controls
37		const id = button.getAttribute('aria-controls');
38		const video = document.getElementById(id);
39		if (video !== null) {
40			return video;
41		}
42	}
43	// connect to previous element
44	const video = prevElement;
45	setA11yAttributeControls(button, video);
46	if (video !== null) {
47		return video;
48	}
49	// no elements found
50	disableButton(button);
51	console.log('no video found for button')
52	return false;
53}
54
55/**
56 * Disables button
57 * @param {*} button 
58 */
59function disableButton(button) {
60	button.style.display = 'none'
61}
62/**
63 * Adds the Event listener to the Button
64 * @param {HTMLElement} button 
65 * @param {HTMLElement} video 
66 */
67function addEventListenerToPlayButton(button, video) {
68	button.addEventListener('click', function () {
69		playPauseVideo(video);
70	});
71}
72
73/**
74 * Adds Event listeners to the Video to update the button
75 * @param {HTMLElement} button 
76 * @param {HTMLElement} video 
77 */
78function updateButtonStateOnVideoStateChange(button, video) {
79	let videoState = '';
80	video.addEventListener('play', function () {
81		updateButtonState(button, true);
82		updateVideoState(video, 'playing');
83	});
84	video.addEventListener('pause', function () {
85		updateButtonState(button, false);
86		updateVideoState(video, 'paused');
87		videoState = 'paused';
88	});
89	video.addEventListener('ended', function () {
90		updateButtonState(button, false);
91		updateVideoState(video, 'ended');
92	});
93
94}
95
96/**
97 * Updates The Button State
98 * @param {HTMLElement} button 
99 * @param {boolean} isPlaying 
100 */
101function updateButtonState(button, isPlaying) {
102	const buttonTextElement = button.querySelector('.wso-video-button-text');
103	let pausedText = (buttonTextElement.getAttribute('data-paused-text')) ? buttonTextElement.getAttribute('data-paused-text') : "Play";
104	let playingText = (buttonTextElement.getAttribute('data-playing-text')) ? buttonTextElement.getAttribute('data-playing-text') : "Pause";
105	let content = pausedText;
106	let state = '';
107	if (isPlaying) {
108		content = playingText;
109		state = 'playing';
110	}
111	buttonTextElement.innerHTML = content;
112	button.setAttribute('data-video-button', state);
113}
114
115
116/**
117 * Updates The Video State
118 * @param {HTMLElement} video 
119 * @param {String} state 
120 */
121function updateVideoState(video, state) {
122	video.setAttribute('data-video-state', state);
123}
124
125
126/**
127 * Adds the functionality to Play/Pause the Video
128 * @param {HTMLElement} video 
129 */
130function playPauseVideo(video) {
131	let isPlaying = false;
132	if (video.paused) {
133		video.play();
134		isPlaying = true;
135	} else {
136		video.pause();
137	}
138}
139
140/**
141 * Adds Accessibility Attribute "Controls" to the Button.
142 * Adds an id to the Video if it doesn't have one
143 * @param {HTMLElement} button 
144 * @param {HTMLElement} video 
145 */
146function setA11yAttributeControls(button, video) {
147	if (video.id.length === 0) {
148		video.id = 'video-' + Math.random().toString(36).substring(2);
149	}
150	button.setAttribute('aria-controls', video.id);
151}
152/**
153 * Adds aria Label to the button 
154 * @param {HTMLElement} button 
155 */
156function setA11yAttributeLabelOnButton(button) {
157	if (button.getAttribute('aria-label') == null || button.getAttribute('aria-label').length === 0) {
158		button.setAttribute('aria-label', 'Play/Pause Video');
159	}
160}