Выдаёт ошибку на строчке "this.ranges.forEach(range => range.addEventListener('change', e => this.handleRangeUpdate(e));", в чём проблема?
Вот сам код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Video Player</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="player">
<video class="player__video viewer" src="video/mov_bbb.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="-1" class="player__button">« 1s</button>
<button data-skip="1" class="player__button">1s »</button>
</div>
</div>
<script src="js/scripts.js"></script>
</body>
</html>
class VideoPlayer {
constructor() {
this.player = document.querySelector('.player');
this.video = this.player.querySelector('.viewer');
this.progress = document.querySelector('.progress');
this.progressBar = this.progress.querySelector('.progress__filled');
this.toggle = this.player.querySelector('.toggle');
this.skipButtons = this.player.querySelectorAll('[data-skip]');
this.ranges = this.player.querySelectorAll('.player__slider');
}
init() {
const self = this;
// Start plugin
this.events(self);
}
events(self) {
//All events
this.video.addEventListener('click',e => this.togglePlay(e));
this.toggle.addEventListener('click', e => this.togglePlay(e));
this.ranges.forEach(range => range.addEventListener('change', e => this.handleRangeUpdate(e));
this.ranges.forEach(range => range.addEventListener('mousemove', e => this.handleRangeUpdate(e));
this.skipButtons.forEach(btn => btn.addEventListener('click', e => this.handleRangeUpdate(e));
}
togglePlay(e) {
const method = this.video.paused ? 'play' : 'paused';
this.toggle.textContent = this.video.paused ? '❚ ❚' : '►';
this.video[method]();
}
handleRangeUpdate(e) {
console.log(e.target.name, e.target.value);
this.video[e.target.name] = e.target.value;
}
skip(e){
this.video.currentTime += parseFloat(e.target.dataset.skip);
}
}
const player = new VideoPlayer();
player.init();