Как при проигровании видео или аудио в компонентах остановить background аудио?

Question

[Ibishka]

Есть template в app vue в котором есть router-view для рендеринга других страниц и там в header есть аудио ее нужно остановить если будет проигрываться другое аудио или видео на сайте. Как динамически остановить аудио в меню если будет проигрываться видео или аудио?

Comments

[Пашенька]

Как бы вы жили без тостеров...

Answer 1

[Stalker_RED]

Подписаться на событие playing, например. (или выберите более подходящее)

примерно так:

document.addEventListener('playing', stopBackgroundAudio)

Comments

[Ibishka]

Stalker_RED, Куда добавить mounted, watch и т.д ???

[Alex]

Stalker_RED, А разве есть возможность повесить слушатель глобально на весь документ, а не на конкретный медиа-элемент?

[Stalker_RED]

Alex,

[Ibishka]

Stalker_RED, А нельзя ли play вместо playing

[Stalker_RED]

Ibishka, можно.
я же давал ссылку на саисок.

play Отправляется, когда воспроизведение медиа начинается после того, как было приостановлено; то есть, когда воспроизведение возобновляется после паузы.
playing Отправляется, когда начинается воспроизведение медиа (в первый раз, после паузы или после перезапуска).

Answer 2

[Alex]

Почитайте про eventbus.

Идея такова: в одном компоненте вы подписываетесь на событие, условно somthing-playing и по этому событию останавливаете аудио.
А во всех остальных компонентах, при запуске аудио или видео вы вызываете это событие.