Приветствую! При выполнении скрипта выдает ошибку 'skipButtons.forEach is not a function'. Что не так?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Player</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="player">
<video class="player__video viewer" src="tv-show.mp4"></video>
<div class="player__controls">
<div class="progress">
<div class="progress__filled"></div>
</div>
<button class="player__button toggle" title="Toggle Play">►</button>
<input type="range" name="volume" class="player__slider" min=0 max="1" step="0.05" value="1">
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
<button data-skip="-10" class="player__button">« 10s</button>
<button data-skip="25" class="player__button">25s »</button>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
/*Elements*/
const player = document.querySelector('.player');
const video = player.querySelector('.viewer');
const progress = player.querySelector('.progress');
const progressBar = player.querySelector('.progress__filled');
const toggle = player.querySelector('.toggle');
const skipButtons = player.querySelector('[data-skip]');
const ranges = player.querySelectorAll('.player__slider');
/*Functions*/
function togglePlay() {
const method = video.paused ? 'play' : 'pause';
video[method]();
}
function updateButton() {
const icon = this.paused ? '►' : '';
console.log(icon);
toggle.textContent = icon;
}
function skip() {
console.log(this.dataset.skip);
video.currentTime += parseFloat(this.dataset.skip);
}
/*EventListeners*/
video.addEventListener('click', togglePlay);
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);
toggle.addEventListener('click', togglePlay);
skipButtons.forEach(button => button.addEventListener('click', skip));
