<header>
  <h2 class="title">Event - durationchange</h2>
  <p class="description">Активується при зміні тривалості медіафайлу, наприклад, відео або аудіо.</p>
</header>
<main>
  <div class="result">
    <label for="video-selector">Виберіть відео:</label>
    <select id="video-selector">
      <option value="https://www.w3schools.com/html/mov_bbb.mp4">Big Buck Bunny</option>
      <option value="https://www.w3schools.com/html/movie.mp4">Sample Video</option>
    </select>
    <video id="video-player" controls width="320" height="240">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      Ваш браузер не підтримує відтворення відео.
    </video>
    <p id="duration-info">Тривалість відео: <span id="duration">0</span> секунд</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-player {
  display: block;
  margin-top: 15px;
}

#duration-info {
  margin-top: 10px;
  font-weight: bold;
}

const videoPlayer = document.getElementById('video-player');
const durationDisplay = document.getElementById('duration');
const videoSelector = document.getElementById('video-selector');

// Додаємо подію 'durationchange' для відеоплеєра
videoPlayer.addEventListener('durationchange', () => {
  const duration = videoPlayer.duration;
  durationDisplay.textContent = duration ? duration.toFixed(2) : "Недоступна";
});

// Зміна джерела відео при виборі в списку
videoSelector.addEventListener('change', (event) => {
  videoPlayer.src = event.target.value;
  videoPlayer.load(); // Завантажуємо нове відео
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.