#Выполнено

  • тернарный оператор
const icon = video.paused? '►' : '||';
toggleButton.textContent = icon;
  • addEventListener — щелчок, пауза, воспроизведение
  • div — переход, флекс, трансформация
.player:hover .player__controls {
   transform: translateY(0);
}
  • ввод [тип = диапазон]
  • видео.объем = 1
  • видео.playbackRate = 0,5
  • video.currentTime += parseFloat(this.dataset.skip);
ranges.forEach(input => input.addEventListener('change', slider));
ranges.forEach(input => input.addEventListener('mousemove', slider));
skipButtons.forEach(button => button.addEventListener('click',skip));

#Обновить громкость и скорость воспроизведения

video[this.name] = this.value
//
if(this.name === "volume"){
  video.volume = this.value;
}else{
  video.playbackRate = this.value;
}

# Время обновления

  • addEventListener «обновление времени»
function timeUpdate(){
    const percent = (video.currentTime / video.duration) * 100;
    progressBar.style.flexBasis = `${percent}%`;
  }

#event.offsetX — Свойство offsetX возвращает координату x указателя мыши относительно целевого элемента.

const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
video.currentTime = scrubTime;

#element.offsetWidth — видимая ширина элемента в пикселях, включая отступы, границу и полосу прокрутки, но не поля.

# перетаскивание индикатора выполнения

  • addEventListener 'mousedown', mouseup, mousemove
let mousedown = false;
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
  // progress.addEventListener('mousemove', (e) => {
  //   if(mousedown){
  //     scrub(e);
  //   }
  // }
  progress.addEventListener('mousedown', () => mousedown = true);
  progress.addEventListener('mouseup', () => mousedown = false);

#ref