@@ -757,17 +757,25 @@
// Wire up volume controls (element is in HTML, not created in JS)
const volSlider = document.getElementById("vol-slider");
const volIcon = document.getElementById("vol-icon");
+ // Starts muted; user must gesture (click icon or drag slider) to enable audio.
volSlider.addEventListener("input", () => {
const v = parseFloat(volSlider.value);
video.volume = v;
+ video.muted = v === 0;
volIcon.textContent = v === 0 ? "\u{1F507}" : v < 0.5 ? "\u{1F509}" : "\u{1F50A}";
});
volIcon.addEventListener("click", () => {
- video.muted = !video.muted;
- volIcon.textContent = video.muted ? "\u{1F507}" : "\u{1F50A}";
- volSlider.value = video.muted ? "0" : "1";
+ if (video.muted) {
+ video.muted = false;
+ video.volume = 1;
+ volSlider.value = "1";
+ volIcon.textContent = "\u{1F50A}";
+ } else {
+ video.muted = true;
+ volSlider.value = "0";
+ volIcon.textContent = "\u{1F507}";
+ }
});
- volSlider.addEventListener("click", (e) => e.stopPropagation());
mediaSource = new MediaSource();
mediaSource.addEventListener("sourceopen", () => {