... | ... |
@@ -1,6 +1,6 @@ |
1 | 1 |
<div id="player-audio-controls" data-source-selector="#image-clip video"> |
2 |
- <a href="{{env::request|urlattr}}" class="audio-mute" aria-label="Ton stummschalten" data-label="Ton stummschalten">{{svg_inline::f6824c1a-7d6c-11ed-9054-d8cb8a1a4c4f}}</a> |
|
3 |
- <a href="{{env::request|urlattr}}" class="audio-unmute" aria-label="Ton einschalten" data-label="Ton einschalten">{{svg_inline::9b19cf0a-7d6d-11ed-9054-d8cb8a1a4c4f}}</a> |
|
2 |
+ <a href="{{env::request|urlattr}}" class="audio-mute" aria-label="Ton stummschalten" data-label="Ton stummschalten">{{svg_inline::9b19cf0a-7d6d-11ed-9054-d8cb8a1a4c4f}}</a> |
|
3 |
+ <a href="{{env::request|urlattr}}" class="audio-unmute" aria-label="Ton einschalten" data-label="Ton einschalten">{{svg_inline::f6824c1a-7d6c-11ed-9054-d8cb8a1a4c4f}}</a> |
|
4 | 4 |
</div> |
5 | 5 |
<script> |
6 | 6 |
document.addEventListener("DOMContentLoaded", function() { |
1 | 1 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,47 @@ |
1 |
+<div id="player-audio-controls" data-source-selector="#image-clip video"> |
|
2 |
+ <a href="{{env::request|urlattr}}" class="audio-mute" aria-label="Ton stummschalten" data-label="Ton stummschalten">{{svg_inline::f6824c1a-7d6c-11ed-9054-d8cb8a1a4c4f}}</a> |
|
3 |
+ <a href="{{env::request|urlattr}}" class="audio-unmute" aria-label="Ton einschalten" data-label="Ton einschalten">{{svg_inline::9b19cf0a-7d6d-11ed-9054-d8cb8a1a4c4f}}</a> |
|
4 |
+</div> |
|
5 |
+<script> |
|
6 |
+ document.addEventListener("DOMContentLoaded", function() { |
|
7 |
+ |
|
8 |
+ var controls = document.getElementById('player-audio-controls'); |
|
9 |
+ var video = controls !== undefined && controls.dataset.sourceSelector !== undefined ? document.querySelector(controls.dataset.sourceSelector) : undefined; |
|
10 |
+ |
|
11 |
+ if (video !== undefined) |
|
12 |
+ { |
|
13 |
+ let mute = controls.querySelector('.audio-mute'), |
|
14 |
+ unmute = controls.querySelector('.audio-unmute'); |
|
15 |
+ |
|
16 |
+ if (mute !== undefined && unmute !== undefined) |
|
17 |
+ { |
|
18 |
+ if (video.muted) |
|
19 |
+ { |
|
20 |
+ unmute.classList.add('-show'); |
|
21 |
+ mute.classList.remove('-show'); |
|
22 |
+ } else { |
|
23 |
+ mute.classList.add('-show'); |
|
24 |
+ unmute.classList.remove('-show'); |
|
25 |
+ } |
|
26 |
+ |
|
27 |
+ unmute.addEventListener('click', (event) => { |
|
28 |
+ event.preventDefault(); |
|
29 |
+ if (video.muted) { |
|
30 |
+ video.muted = false; |
|
31 |
+ mute.classList.add('-show'); |
|
32 |
+ unmute.classList.remove('-show'); |
|
33 |
+ } |
|
34 |
+ }); |
|
35 |
+ mute.addEventListener('click', (event) => { |
|
36 |
+ event.preventDefault(); |
|
37 |
+ if (!video.muted) { |
|
38 |
+ video.muted = true; |
|
39 |
+ unmute.classList.add('-show'); |
|
40 |
+ mute.classList.remove('-show'); |
|
41 |
+ } |
|
42 |
+ }); |
|
43 |
+ } |
|
44 |
+ } |
|
45 |
+ |
|
46 |
+ }); |
|
47 |
+</script> |