@openplayerjs/player 3.4.0 → 3.4.1

package/dist/index.js

@@ -7,11 +7,15 @@ const defaultUIConfiguration = {
 };
 const defaultLabels = Object.freeze({
     auto: 'Auto',
+    back: 'Back',
     captions: 'CC/Subtitles',
+    captionsOff: 'Captions off',
+    captionsOn: 'Captions on',
     click: 'Click to unmute',
     container: 'Media player',
+    enterFullscreen: 'Enter Fullscreen',
+    exitFullscreen: 'Exit Fullscreen',
     fullscreen: 'Fullscreen',
-    levels: 'Quality Levels',
     live: 'Live',
     loading: 'Loading...',
     media: 'Media',
@@ -22,6 +26,7 @@ const defaultLabels = Object.freeze({
     progressRail: 'Time Rail',
     progressSlider: 'Time Slider',
     restart: 'Restart',
+    seekTo: 'Seek to %s',
     settings: 'Player Settings',
     speed: 'Speed',
     speedNormal: 'Normal',
@@ -30,6 +35,7 @@ const defaultLabels = Object.freeze({
     unmute: 'Unmute',
     volume: 'Volume',
     volumeControl: 'Volume Control',
+    volumePercent: 'Volume: %s%',
     volumeSlider: 'Volume Slider',
 });
 function resolveUIConfig(coreOrConfig) {
@@ -206,7 +212,7 @@ function bindCenterOverlay(core, keyTarget, bindings) {
     window.addEventListener('click', onPointer, EVENT_OPTIONS);
     window.addEventListener('pointerdown', onPointer, EVENT_OPTIONS);
     window.addEventListener('keydown', onKeyboard, EVENT_OPTIONS);
-    keyTarget.addEventListener('keydown', async (e) => {
+    const onKeydown = async (e) => {
         const key = e.key;
         onKeyboard();
         const activeEl = document.activeElement;
@@ -246,23 +252,20 @@ function bindCenterOverlay(core, keyTarget, bindings) {
                 e.preventDefault();
                 e.stopPropagation();
                 break;
-            // Volume
             case 'ArrowUp': {
                 const upVolume = Math.min(core.volume + 0.1, 1);
                 core.volume = upVolume;
                 core.muted = !(upVolume > 0);
                 if (upVolume > 0)
                     lastNonZeroVolume = upVolume;
-                const el = getActiveMedia(core);
-                if (el && el !== core.surface) {
-                    try {
+                try {
+                    const el = getActiveMedia(core);
+                    if (el && el !== core.surface) {
                         el.volume = upVolume;
                         el.muted = !(upVolume > 0);
                     }
-                    catch {
-                        // ignore
-                    }
                 }
+                catch { /* ignore */ }
                 e.preventDefault();
                 e.stopPropagation();
                 break;
@@ -273,16 +276,14 @@ function bindCenterOverlay(core, keyTarget, bindings) {
                 core.muted = !(downVolume > 0);
                 if (downVolume > 0)
                     lastNonZeroVolume = downVolume;
-                const el = getActiveMedia(core);
-                if (el && el !== core.surface) {
-                    try {
+                try {
+                    const el = getActiveMedia(core);
+                    if (el && el !== core.surface) {
                         el.volume = downVolume;
                         el.muted = !(downVolume > 0);
                     }
-                    catch {
-                        // ignore
-                    }
                 }
+                catch { /* ignore */ }
                 e.preventDefault();
                 e.stopPropagation();
                 break;
@@ -305,40 +306,35 @@ function bindCenterOverlay(core, keyTarget, bindings) {
                 e.stopPropagation();
                 break;
             }
-            // Mute toggle preserving last volume
             case 'm':
             case 'M': {
-                const el = getActiveMedia(core);
                 const nextMuted = !core.muted;
                 if (nextMuted) {
-                    // store last non-zero volume before muting
                     if (core.volume > 0)
                         lastNonZeroVolume = core.volume;
                     core.volume = 0;
                     core.muted = true;
-                    if (el && el !== core.surface) {
-                        try {
+                    try {
+                        const el = getActiveMedia(core);
+                        if (el && el !== core.surface) {
                             el.volume = 0;
                             el.muted = true;
                         }
-                        catch {
-                            // ignore
-                        }
                     }
+                    catch { /* ignore */ }
                 }
                 else {
                     const restore = lastNonZeroVolume > 0 ? lastNonZeroVolume : 1;
                     core.volume = restore;
                     core.muted = false;
-                    if (el && el !== core.surface) {
-                        try {
+                    try {
+                        const el = getActiveMedia(core);
+                        if (el && el !== core.surface) {
                             el.volume = restore;
                             el.muted = false;
                         }
-                        catch {
-                            // ignore
-                        }
                     }
+                    catch { /* ignore */ }
                 }
                 e.preventDefault();
                 e.stopPropagation();
@@ -375,38 +371,55 @@ function bindCenterOverlay(core, keyTarget, bindings) {
                 e.stopPropagation();
                 break;
         }
-    }, EVENT_OPTIONS);
-    core.events.on('waiting', () => {
+    };
+    keyTarget.addEventListener('keydown', onKeydown, EVENT_OPTIONS);
+    const offWaiting = core.events.on('waiting', () => {
         bindings?.showLoader(true);
         bindings?.showButton(false);
     });
-    core.events.on('seeking', () => {
+    const offSeeking = core.events.on('seeking', () => {
         bindings?.showLoader(true);
         bindings?.showButton(false);
     });
-    core.events.on('seeked', () => {
+    const offSeeked = core.events.on('seeked', () => {
         bindings?.showLoader(false);
         // After seeking, only show the center button if we are paused.
         // When seeking during playback (common on iOS), keeping the play button visible
         // causes it to linger even after the loader is hidden.
         bindings?.showButton(core.media?.paused ?? false);
     });
-    core.events.on('play', () => {
+    const offPlay = core.events.on('play', () => {
         bindings?.showLoader(false);
         bindings?.showButton(false);
     });
-    core.events.on('pause', () => {
+    const offPause = core.events.on('pause', () => {
         bindings?.showLoader(false);
         bindings?.showButton(true);
     });
-    core.events.on('playing', () => {
+    const offPlaying = core.events.on('playing', () => {
         bindings?.showLoader(false);
         bindings?.showButton(false);
     });
-    core.events.on('ended', () => {
+    const offEnded = core.events.on('ended', () => {
         bindings?.showLoader(false);
         bindings?.showButton(true);
     });
+    return () => {
+        keyTarget.removeEventListener('click', onPointer);
+        keyTarget.removeEventListener('pointerdown', onPointer);
+        keyTarget.removeEventListener('pointerleave', onPointer);
+        keyTarget.removeEventListener('keydown', onKeydown);
+        window.removeEventListener('click', onPointer);
+        window.removeEventListener('pointerdown', onPointer);
+        window.removeEventListener('keydown', onKeyboard);
+        offWaiting();
+        offSeeking();
+        offSeeked();
+        offPlay();
+        offPause();
+        offPlaying();
+        offEnded();
+    };
 }
 
 let srId$1 = 0;
@@ -462,6 +475,60 @@ function setA11yLabel(el, labelText, opts) {
     }
     ensureLabelledBy(el, labelText, opts);
 }
+const _sharedAnnouncers = new WeakMap();
+/**
+ * Returns the shared announcer for `wrapper`, creating it on first call.
+ * Multiple controls attached to the same wrapper share the same 2 live-region
+ * nodes. Each caller receives its own `destroy` handle; the DOM nodes are only
+ * removed once every caller has destroyed its handle (ref-counting).
+ */
+function getSharedAnnouncer(wrapper) {
+    let entry = _sharedAnnouncers.get(wrapper);
+    if (!entry) {
+        const { announce, destroy } = createAnnouncer(wrapper);
+        entry = { announce, refs: 0, _destroy: destroy };
+        _sharedAnnouncers.set(wrapper, entry);
+    }
+    entry.refs += 1;
+    const captured = entry;
+    const destroy = () => {
+        captured.refs -= 1;
+        if (captured.refs <= 0) {
+            captured._destroy();
+            _sharedAnnouncers.delete(wrapper);
+        }
+    };
+    return { announce: entry.announce, destroy };
+}
+function createAnnouncer(wrapper) {
+    const regions = [];
+    let turn = 0;
+    for (let i = 0; i < 2; i++) {
+        const el = document.createElement('div');
+        el.setAttribute('role', 'status');
+        el.setAttribute('aria-live', 'polite');
+        el.setAttribute('aria-atomic', 'true');
+        el.className = 'op-player__sr-only op-player__announcer';
+        el.setAttribute('aria-hidden', 'true');
+        wrapper.appendChild(el);
+        regions.push(el);
+    }
+    const announce = (message) => {
+        // Rotate between the two regions — forces a DOM mutation even for the
+        // same string, which re-triggers announcement in most screen readers.
+        const current = regions[turn % 2];
+        const other = regions[(turn + 1) % 2];
+        turn++;
+        other.textContent = '';
+        other.setAttribute('aria-hidden', 'true');
+        current.setAttribute('aria-hidden', 'false');
+        current.textContent = message;
+    };
+    const destroy = () => {
+        regions.forEach((r) => r.remove());
+    };
+    return { announce, destroy };
+}
 
 function createCenterOverlayDom(core) {
     const labels = resolveUIConfig(core).labels;
@@ -669,10 +736,11 @@ function createUI(core, media, controls, options = {}) {
         mediaContainer.appendChild(overlay.button);
         mediaContainer.appendChild(overlay.loader);
     }
-    bindCenterOverlay(core, wrapper, overlay);
+    const teardownCenterOverlay = bindCenterOverlay(core, wrapper, overlay);
     const controlsRoot = document.createElement('div');
     controlsRoot.className = 'op-controls';
     controlsRoot.setAttribute('aria-hidden', 'false');
+    controlsRoot.inert = false;
     if (isMediaAudio) {
         const grid = createControlGrid(controlsRoot);
         wrapper.appendChild(mediaContainer);
@@ -705,6 +773,7 @@ function createUI(core, media, controls, options = {}) {
                 // ignore
             }
             try {
+                teardownCenterOverlay();
                 offAddElement();
                 offAddControl();
                 offDestroy();
@@ -745,6 +814,7 @@ function createUI(core, media, controls, options = {}) {
         if (hideTimer)
             window.clearTimeout(hideTimer);
         controlsRoot.setAttribute('aria-hidden', 'false');
+        controlsRoot.inert = false;
         core.events.emit('ui:controls:show');
     };
     const hideControls = () => {
@@ -761,6 +831,7 @@ function createUI(core, media, controls, options = {}) {
         wrapper.classList.add('op-controls--hidden');
         mediaContainer.classList.add('op-media--controls-hidden');
         controlsRoot.setAttribute('aria-hidden', 'true');
+        controlsRoot.inert = true;
         core.events.emit('ui:controls:hide');
     };
     const scheduleHide = (ms) => {
@@ -779,37 +850,45 @@ function createUI(core, media, controls, options = {}) {
         showControls();
         scheduleHide(POINTER_SHOW_MS);
     };
-    controlsRoot.addEventListener('focusin', () => {
+    // Track all video-path DOM listeners so they can be removed on destroy.
+    const domUnsubs = [];
+    const trackListener = (target, type, handler, options) => {
+        target.addEventListener(type, handler, options);
+        domUnsubs.push(() => target.removeEventListener(type, handler, options));
+    };
+    const onControlsFocusIn = () => {
         lastInteraction = 'keyboard';
         showControls();
         scheduleHide(KEYBOARD_SHOW_MS);
-    });
-    controlsRoot.addEventListener('focusout', () => {
+    };
+    const onControlsFocusOut = () => {
         window.setTimeout(() => {
             if (!controlsHaveFocus())
                 scheduleHide(lastInteraction === 'keyboard' ? KEYBOARD_SHOW_MS : POINTER_SHOW_MS);
         }, 0);
-    });
+    };
+    trackListener(controlsRoot, 'focusin', onControlsFocusIn);
+    trackListener(controlsRoot, 'focusout', onControlsFocusOut);
     const isFocusInMediaArea = () => {
         const active = document.activeElement;
         if (!active)
             return false;
         return wrapper.contains(active) && !controlsRoot.contains(active);
     };
-    wrapper.addEventListener('focusin', () => {
+    const onWrapperFocusIn = () => {
         if (isFocusInMediaArea()) {
             showControls();
             if (hideTimer)
                 window.clearTimeout(hideTimer);
         }
-    }, EVENT_OPTIONS);
-    wrapper.addEventListener('focusout', () => {
+    };
+    const onWrapperFocusOut = () => {
         window.setTimeout(() => {
             if (!wrapper.contains(document.activeElement) && !controlsHaveFocus())
                 scheduleHide();
         }, 0);
-    }, EVENT_OPTIONS);
-    wrapper.addEventListener('keydown', () => {
+    };
+    const onWrapperKeyDown = () => {
         lastInteraction = 'keyboard';
         if (isFocusInMediaArea()) {
             showControls();
@@ -820,20 +899,25 @@ function createUI(core, media, controls, options = {}) {
             showControls();
             scheduleHide(KEYBOARD_SHOW_MS);
         }
-    }, EVENT_OPTIONS);
+    };
+    trackListener(wrapper, 'focusin', onWrapperFocusIn, EVENT_OPTIONS);
+    trackListener(wrapper, 'focusout', onWrapperFocusOut, EVENT_OPTIONS);
+    trackListener(wrapper, 'keydown', onWrapperKeyDown, EVENT_OPTIONS);
     if (mobile) {
-        wrapper.addEventListener('pointerdown', () => {
+        const onWrapperPointerDown = () => {
             lastInteraction = 'pointer';
             showControls();
             scheduleHide(POINTER_SHOW_MS);
-        }, EVENT_OPTIONS);
+        };
+        trackListener(wrapper, 'pointerdown', onWrapperPointerDown, EVENT_OPTIONS);
     }
     else {
-        wrapper.addEventListener('pointermove', onControlsHover, EVENT_OPTIONS);
-        wrapper.addEventListener('pointerenter', onControlsHover, EVENT_OPTIONS);
-        controlsRoot.addEventListener('pointerenter', onControlsHover, EVENT_OPTIONS);
-        controlsRoot.addEventListener('pointermove', onControlsHover, EVENT_OPTIONS);
-        controlsRoot.addEventListener('pointerleave', () => scheduleHide(POINTER_SHOW_MS), EVENT_OPTIONS);
+        const onControlsPointerLeave = () => scheduleHide(POINTER_SHOW_MS);
+        trackListener(wrapper, 'pointermove', onControlsHover, EVENT_OPTIONS);
+        trackListener(wrapper, 'pointerenter', onControlsHover, EVENT_OPTIONS);
+        trackListener(controlsRoot, 'pointerenter', onControlsHover, EVENT_OPTIONS);
+        trackListener(controlsRoot, 'pointermove', onControlsHover, EVENT_OPTIONS);
+        trackListener(controlsRoot, 'pointerleave', onControlsPointerLeave, EVENT_OPTIONS);
     }
     const grid = createControlGrid(controlsRoot, mainControls);
     wrapper.appendChild(mediaContainer);
@@ -847,7 +931,7 @@ function createUI(core, media, controls, options = {}) {
     });
     const ctx = { wrapper, mediaContainer, controlsRoot, placeholder, grid };
     maybeAutoplayUnmute(core, wrapper);
-    wrapper.addEventListener('click', async (e) => {
+    const onWrapperClick = async (e) => {
         // Linear overlays (e.g. full-screen ads with their own video) own click handling.
         // Non-linear ads (no fullscreenVideoEl) run alongside the content, so we allow pause.
         if (getOverlayManager(core).active?.fullscreenVideoEl)
@@ -867,7 +951,8 @@ function createUI(core, media, controls, options = {}) {
         else {
             await core.play().catch(() => undefined);
         }
-    }, EVENT_OPTIONS);
+    };
+    trackListener(wrapper, 'click', onWrapperClick, EVENT_OPTIONS);
     const offPlaying = core.events.on('playing', () => scheduleHide(POINTER_SHOW_MS));
     const offPause = core.events.on('pause', () => showControls());
     const offEnded = core.events.on('ended', () => showControls());
@@ -900,13 +985,15 @@ function createUI(core, media, controls, options = {}) {
             // ignore
         }
         try {
+            domUnsubs.forEach((u) => u());
+            teardownCenterOverlay();
             offPlaying?.();
             offPause?.();
             offEnded?.();
             offMenuOpen?.();
             offMenuClose?.();
-            offAddElement();
-            offAddControl();
+            offAddElement?.();
+            offAddControl?.();
             offDestroy();
         }
         catch {
@@ -1144,6 +1231,8 @@ class CaptionsControl extends BaseControl {
         const labels = resolveUIConfig(core).labels;
         const label = labels.captions;
         const buttonLabel = labels.toggleCaptions;
+        const { announce, destroy } = getSharedAnnouncer(this.resolvePlayerRoot());
+        this.dispose.add(destroy);
         this.button = document.createElement('button');
         this.button.type = 'button';
         this.button.className = 'op-controls__captions';
@@ -1232,6 +1321,8 @@ class CaptionsControl extends BaseControl {
                 }
             }
             refresh();
+            const on = this.button.getAttribute('aria-pressed') === 'true';
+            announce(on ? (labels.captionsOn ?? `${label} on`) : (labels.captionsOff ?? `${label} off`));
             me.preventDefault();
             me.stopPropagation();
         }, EVENT_OPTIONS);
@@ -1447,6 +1538,7 @@ class DurationControl extends BaseControl {
         const el = document.createElement('time');
         el.className = 'op-controls__duration';
         el.setAttribute('aria-hidden', 'false');
+        el.setAttribute('aria-live', 'off');
         el.setAttribute('datetime', 'PT0M0S');
         const update = () => {
             if (this.activeOverlay) {
@@ -1547,6 +1639,8 @@ class FullscreenControl extends BaseControl {
         const core = this.core;
         const labels = resolveUIConfig(core).labels;
         const btn = document.createElement('button');
+        const { announce, destroy } = getSharedAnnouncer(this.resolvePlayerRoot());
+        this.dispose.add(destroy);
         btn.tabIndex = 0;
         btn.type = 'button';
         btn.className = 'op-controls__fullscreen';
@@ -1633,6 +1727,10 @@ class FullscreenControl extends BaseControl {
             me.preventDefault();
             me.stopPropagation();
         }, EVENT_OPTIONS);
+        this.onPlayer('player:fullscreenchange', () => {
+            const key = getFullscreenElement() ? 'enterFullscreen' : 'exitFullscreen';
+            announce(labels[key] ?? key);
+        });
         sync();
         return btn;
     }
@@ -1674,6 +1772,12 @@ class PlayControl extends BaseControl {
         const playLabel = labels.play;
         const pauseLabel = labels.pause;
         const restartLabel = labels.restart;
+        const { announce, destroy } = getSharedAnnouncer(this.resolvePlayerRoot());
+        this.dispose.add(destroy);
+        const fmt = (key, value) => {
+            const t = labels[key] ?? key;
+            return value != null ? t.replace('%s', value) : t;
+        };
         let isEnded = false;
         const btn = document.createElement('button');
         btn.tabIndex = 0;
@@ -1704,8 +1808,13 @@ class PlayControl extends BaseControl {
         this.onPlayer('playing', () => {
             isEnded = false;
             setPlaying(true);
+            if (!core.media.seeking)
+                announce(labels['pause'] ? fmt('play') : 'Playing');
+        });
+        this.onPlayer('pause', () => {
+            setPlaying(false);
+            announce(labels['pause'] ?? 'Paused');
         });
-        this.onPlayer('pause', () => setPlaying(false));
         this.onPlayer('ended', () => {
             isEnded = true;
             setPlaying(false);
@@ -1746,6 +1855,13 @@ class ProgressControl extends BaseControl {
         const core = this.core;
         const ui = resolveUIConfig(core);
         const { allowRewind, allowSkip, labels } = ui;
+        const labelsMap = labels;
+        const { announce, destroy } = getSharedAnnouncer(this.resolvePlayerRoot());
+        this.dispose.add(destroy);
+        const fmt = (key, value) => {
+            const t = labelsMap[key] ?? key;
+            return value != null ? t.replace('%s', value) : t;
+        };
         const progressLabel = labels.progressSlider;
         const railLabel = labels.progressRail;
         const progress = document.createElement('div');
@@ -1934,6 +2050,11 @@ class ProgressControl extends BaseControl {
         }, EVENT_OPTIONS);
         this.onPlayer('durationchange', updateUI);
         this.onPlayer('timeupdate', updateUI);
+        this.onPlayer('seeked', () => {
+            const t = formatTime(core.currentTime);
+            const d = isFinite(core.duration) ? formatTime(core.duration) : undefined;
+            announce(d ? `${fmt('seekTo', t)} of ${d}` : fmt('seekTo', t));
+        });
         this.onPlayer('waiting', () => {
             if (!slider.classList.contains('loading'))
                 slider.classList.add('loading');
@@ -2219,10 +2340,11 @@ class SettingsControl extends BaseControl {
         }
         const header = document.createElement('div');
         header.className = 'op-menu__header';
+        const { labels } = resolveUIConfig(this.core);
         const back = document.createElement('button');
         back.type = 'button';
         back.className = 'op-submenu__back';
-        setA11yLabel(back, 'Back');
+        setA11yLabel(back, labels.back);
         this.listen(back, 'click', (e) => {
             const me = e;
             this.activeSubmenuId = null;
@@ -2295,6 +2417,7 @@ class TimeControl extends BaseControl {
         const delimiter = document.createElement('span');
         delimiter.className = 'op-controls__time-delimiter';
         delimiter.textContent = '/';
+        delimiter.setAttribute('aria-hidden', 'true');
         const container = document.createElement('span');
         container.className = 'op-controls-time';
         const currentTime = new CurrentTimeControl().create(core);
@@ -2331,11 +2454,23 @@ class VolumeControl extends BaseControl {
     build() {
         const core = this.core;
         const labels = resolveUIConfig(core).labels;
+        const labelsMap = labels;
         const muteLabel = labels.mute;
         const unmuteLabel = labels.unmute;
         const volumeLabel = labels.volume;
         const volumeControlLabel = labels.volumeControl;
         const volumeSliderLabel = labels.volumeSlider;
+        const { announce, destroy } = getSharedAnnouncer(this.resolvePlayerRoot());
+        this.dispose.add(destroy);
+        const fmt = (key, value) => {
+            const t = labelsMap[key] ?? key;
+            return value != null ? t.replace('%s', value) : t;
+        };
+        let volTimer = null;
+        this.dispose.add(() => {
+            if (volTimer)
+                clearTimeout(volTimer);
+        });
         const wrapper = document.createElement('div');
         wrapper.className = 'op-controls__volume';
         wrapper.tabIndex = 0;
@@ -2415,15 +2550,23 @@ class VolumeControl extends BaseControl {
             }
             updateSlider(v);
             updateBtn(v);
+            if (volTimer)
+                clearTimeout(volTimer);
+            volTimer = setTimeout(() => {
+                announce(fmt('volumePercent', String(Math.round(v * 100))));
+                volTimer = null;
+            }, 400);
         }, EVENT_OPTIONS);
         this.listen(btn, 'click', (e) => {
             const me = e;
             const el = getActiveMedia(core);
+            let announcePct;
             if (!core.muted) {
                 if (core.volume > 0)
                     lastVolume = core.volume;
                 core.volume = 0;
                 core.muted = true;
+                announcePct = 0;
                 if (el && el !== core.surface) {
                     try {
                         el.volume = 0;
@@ -2440,6 +2583,7 @@ class VolumeControl extends BaseControl {
                 const restore = lastVolume > 0 ? lastVolume : 1;
                 core.volume = restore;
                 core.muted = false;
+                announcePct = Math.round(restore * 100);
                 if (el && el !== core.surface) {
                     try {
                         el.volume = restore;
@@ -2452,9 +2596,38 @@ class VolumeControl extends BaseControl {
                     }
                 }
             }
+            if (volTimer)
+                clearTimeout(volTimer);
+            volTimer = null;
+            announce(fmt('volumePercent', String(announcePct)));
             me.preventDefault();
             me.stopPropagation();
         }, EVENT_OPTIONS);
+        // Re-entrancy guard: writing el.volume/el.muted fires a DOM volumechange which
+        // bridges back to core.events, re-triggering this handler. The ads plugin also
+        // writes core.volume/core.muted from its own volumechange listener on the ad
+        // video element, creating a cross-handler loop. The flag breaks the cycle.
+        let syncingVolume = false;
+        const syncActiveMedia = (muted, vol) => {
+            if (syncingVolume)
+                return;
+            const el = getActiveMedia(core);
+            if (!el || el === core.surface)
+                return;
+            syncingVolume = true;
+            try {
+                if (el.muted !== muted)
+                    el.muted = muted;
+                if (!muted && el.volume !== vol)
+                    el.volume = vol;
+            }
+            catch {
+                // ignore
+            }
+            finally {
+                syncingVolume = false;
+            }
+        };
         this.onPlayer('loadedmetadata', () => {
             const muted = core.muted || core.volume === 0;
             const vol = formatVolume(core.volume);
@@ -2463,19 +2636,11 @@ class VolumeControl extends BaseControl {
             slider.value = (muted ? 0 : vol).toString();
             updateSlider(muted ? 0 : vol);
             updateBtn(muted ? 0 : vol);
-            const el = getActiveMedia(core);
-            if (el && el !== core.surface) {
-                try {
-                    el.muted = muted;
-                    if (!muted)
-                        el.volume = vol;
-                }
-                catch {
-                    // ignore
-                }
-            }
+            syncActiveMedia(muted, vol);
         });
         this.onPlayer('volumechange', () => {
+            if (syncingVolume)
+                return;
             const muted = core.muted || core.volume === 0;
             const vol = formatVolume(core.volume);
             if (vol > 0)
@@ -2484,17 +2649,7 @@ class VolumeControl extends BaseControl {
             updateSlider(muted ? 0 : vol);
             updateBtn(muted ? 0 : vol);
             btn.setAttribute('aria-pressed', muted ? 'true' : 'false');
-            const el = getActiveMedia(core);
-            if (el && el !== core.surface) {
-                try {
-                    el.muted = muted;
-                    if (!muted)
-                        el.volume = vol;
-                }
-                catch {
-                    // ignore
-                }
-            }
+            syncActiveMedia(muted, vol);
         });
         const container = document.createElement('div');
         container.className = 'op-controls__volume--container';