Вы хотите добавить интерактивности своему веб-приложению, обнаруживая изменения в состоянии без звука видео? Не смотрите дальше! В этом сообщении блога мы рассмотрим различные методы в JavaScript, позволяющие обнаружить, когда видео меняет состояние отключения звука. Так что хватайте редактор кода и приступайте!

Метод 1: использование свойства «muted»

Один простой подход — использовать свойство «приглушено» видеоэлемента. Это свойство указывает, отключено ли видео или нет. Мы можем прикрепить прослушиватель событий к элементу видео и прослушивать изменения свойства «muted».

const video = document.getElementById('myVideo');
video.addEventListener('volumechange', () => {
  if (video.muted) {
    console.log('Video is now muted!');
    // Your logic here
  } else {
    console.log('Video is now unmuted!');
    // Your logic here
  }
});

Метод 2: использование события «volumechange»

Событие «volumechange» вызывается всякий раз, когда происходит изменение громкости или отключения звука видео. Мы можем прослушать это событие и проверить свойство «muted», чтобы определить, отключено ли видео.

const video = document.getElementById('myVideo');
video.addEventListener('volumechange', () => {
  if (video.muted) {
    console.log('Video is now muted!');
    // Your logic here
  } else {
    console.log('Video is now unmuted!');
    // Your logic here
  }
});

Метод 3: наблюдение за DOM с помощью MutationObserver

Если вы хотите обнаружить изменения в состоянии отключения звука для нескольких видео, динамически добавляемых на страницу, вы можете использовать API MutationObserver. Это позволяет вам наблюдать за изменениями, внесенными в DOM, включая добавление видеоэлементов, и реагировать соответствующим образом.

const videoContainer = document.getElementById('videoContainer');
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'muted') {
      const video = mutation.target;
      if (video.muted) {
        console.log('Video is now muted!');
        // Your logic here
      } else {
        console.log('Video is now unmuted!');
        // Your logic here
      }
    }
  }
});
observer.observe(videoContainer, { attributes: true, subtree: true });

Метод 4: отслеживание изменений громкости с помощью таймера

В некоторых сценариях событие «volumechange» может не срабатывать при изменении состояния отключения звука. В таких случаях мы можем использовать таймер, чтобы периодически проверять уровень громкости и указывать, отключен ли звук в видео.

const video = document.getElementById('myVideo');
let previousVolume = video.volume;
setInterval(() => {
  if (video.volume === 0 && previousVolume !== 0) {
    console.log('Video is now muted!');
    // Your logic here
  } else if (video.volume !== 0 && previousVolume === 0) {
    console.log('Video is now unmuted!');
    // Your logic here
  }
  previousVolume = video.volume;
}, 500);

Заключение

Используя эти методы в JavaScript, вы можете легко обнаруживать изменения состояния отключения звука видеоэлемента и выполнять специальные действия на основе этих изменений. Независимо от того, создаете ли вы веб-приложение, ориентированное на видео, или просто повышаете интерактивность пользователей, эти методы, несомненно, пригодятся.

Не забудьте реализовать метод, который лучше всего соответствует вашим потребностям, и учитывать совместимость определенных функций в разных браузерах.

Удачного программирования!