<header>
  <h2 class="title">volumechange</h2>
  <p class="description">Відслідковує зміни гучності та вимкнення звуку для відео елемента</p>
</header>
<main>
  <div class="result">
    <!-- Відео елемент -->
    <video id="videoElement" controls width="400">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      Ваш браузер не підтримує відтворення відео.
    </video>

    <!-- Повзунок для регулювання гучності -->
    <div>
      <label for="volumeSlider">Гучність:</label>
      <input type="range" id="volumeSlider" min="0" max="100" value="50">
    </div>

    <!-- Кнопка для вимкнення/ввімкнення звуку -->
    <div>
      <button id="muteButton">Вимкнути звук</button>
    </div>

    <!-- Текстовий індикатор гучності -->
    <p id="volumeDisplay">Поточна гучність: 50%</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

video {
  display: block;
  margin-bottom: 15px;
}

input[type="range"] {
  width: 100%;
  max-width: 300px;
  margin-top: 10px;
}

button {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

#volumeDisplay {
  margin-top: 15px;
  color: #333;
}

const videoElement = document.getElementById('videoElement');
const volumeSlider = document.getElementById('volumeSlider');
const muteButton = document.getElementById('muteButton');
const volumeDisplay = document.getElementById('volumeDisplay');

// Встановлюємо початкову гучність для відео
videoElement.volume = 0.5;

// Обробник події зміни гучності через повзунок
volumeSlider.addEventListener('input', () => {
  const volumeValue = volumeSlider.value / 100;
  videoElement.volume = volumeValue;
});

// Обробник події для вимкнення/ввімкнення звуку
muteButton.addEventListener('click', () => {
  videoElement.muted = !videoElement.muted;
  muteButton.textContent = videoElement.muted ? 'Увімкнути звук' : 'Вимкнути звук';
});

// Обробник події 'volumechange' для відстеження змін гучності або статусу звуку
videoElement.addEventListener('volumechange', () => {
  if (videoElement.muted) {
    volumeDisplay.textContent = 'Звук вимкнено';
    volumeSlider.value = 0;
  } else {
    const volumePercent = Math.round(videoElement.volume * 100);
    volumeDisplay.textContent = `Поточна гучність: ${volumePercent}%`;
    volumeSlider.value = volumePercent;
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.