Не останавливается видео на паузу

251

03 марта 2018, 22:02

Подскажите пожалуйста, в чём проблема? Надо чтобы видео останавливалось по клике на кнопку, но оно только 1 раз меняет знак кнопки на паузу, возвращает обратно, но так и не останавливает.

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.skip(e))); 
		this.progress.addEventListener('click', function (e) { 
			console.log(e.offsetX); 
		}) 
	} 
	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();

<!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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Javascript калькулятор услуг [требует правки]

Всем привет ребята, не могу доработать чужой калькулятор услуг, как можно реализовать скрипт который при изменений "Количество санузлов"...

260

javascript

JS/jquery защита от флуда AJAX запроса

Здравствуйте, у меня вопрос по поводу рентабельности/примитивности/актуальности моего кода

256

javascript

Убрать крайние пробелы

Есть <input type="text" id="firstTdVal">Пользователь вводит в поле данные, после чего я проверяю его на пустоту

240

javascript

Отражение “имени” записи по FK

Имеется таблица, в которой ParentId FK к полю ID, который в свою очередь PKМожно ли на стороне JS отразить не сам ID(ParentId) а имя той записи, которая является...

231