JavaScript 30- День 11 Учебные заметки

День 11 курса JavaScript 30 Веса Боса состоял из добавления элементов управления воспроизведением видео в видео MP4. Программа добавила пользовательские элементы управления прямо на изображение. Это включало широкое использование кода JavaScript.

Во-первых, нам нужно было получить наши элементы из HTML. На самом деле я знал, как это сделать, с небольшими изменениями синтаксиса после того, как Бос показал нам, как он это сделал.

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.querySelectorAll("[data-skip]"); //skip ahead or back buttons
const ranges = player.querySelectorAll(".player__slider");

Next Bos создал несколько функций для функций.

Для кнопки воспроизведения.

function togglePlay(){
   if(video.paused){
      video.play();
}else {
      video.pause();
}
};

В качестве альтернативы Бос показал нам, как сделать то же самое с помощью тернарного оператора.

/*alternate way
const method = video.paused ? 'play' : 'pause';
video[method]() //since method is a string */

Я все еще привыкаю к ​​тому, что является струной, а что нет. Поэтому я нашел этот способ немного запутанным.

Затем Бос показал нам, как обновить значки на кнопке воспроизведения.

function updatebutton(){
const icon = this.paused ? '►': '❚ ❚';
//use 'this' since variable is bound to 'video'
toggle.textContent = icon;
}

Кнопки перемотать вперед на 25 секунд и перемотать назад на 10 секунд.

function skip(){
video.currentTime += parseFloat(this.dataset.skip);
/* this.dataset.skip is a string, use parseFloat.
refers to object with one of these values inside -10s or +25s */
}

Эта функция затрагивала панели управления громкостью и скоростью воспроизведения.

function handleRangeUpdate(){
video[this.name] = this.value;
//volume or playbackRate is attached to value
}

Эта функция обрабатывала индикатор выполнения.

function handleProgress(){
const percent = (video.currentTime / video.duration ) * 100;
progressBar.style.flexBasis = `${percent}%`;
}

Последняя функция управляла функцией очистки.

function scrub(e) {
const scrubTime =(e.offsetX/ progress.offsetWidth) * video.duration;
// position clicked / entire width * entire duration
video.currentTime = scrubTime;
}

Вот все прослушиватели событий.

video.addEventListener('click', togglePlay);
video.addEventListener('play', updatebutton);
video.addEventListener('pause', updatebutton);
video.addEventListener('timeupdate', handleProgress);
toggle.addEventListener('click', togglePlay);
skipButtons.forEach(button => button.addEventListener('click', skip));
ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
let mousedown = false;
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
progress.addEventListener('mousedown', () => mousedown = true);
progress.addEventListener('mousemove', () => mousedown = false);

Я нашел логику простой для понимания, но опять же, большая часть синтаксиса была для меня новой. Я не уверен, что смогу повторить это самостоятельно. Я попробую найти файл MP4 и воспроизвести эту программу.

Следите за моими заметками по JavaScript 30, пока я работаю над курсом.