playbackRate
속성은 현재 비디오 재생 속도를 설정할 수 있기 때문에 빨리 감기, 슬로우 모션 등에 대한 사용자 컨트롤을 구현할 수 있다.
그 밖에 마우스 좌표나 비율 값 변화 같은 정보는 이전 시간에 구현 해본 방법이랑 비슷해서 어렵지 않게 할 수 있었다.
(function(){
const video = document.querySelector('video');
const speed = document.querySelector('.speed');
const speedBar = document.querySelector('.speed-bar');
const percentToMinMax = (percent) => {
const min = 0.4;
const max = 4;
return (percent * (max - min) + min).toFixed(2);
}
const changeVideoSpeed = (percent) => {
const videoSpeed = percentToMinMax(percent);
speedBar.style.height = `${Math.round(percent * 100)}%`;
speedBar.textContent = `${videoSpeed}x`;
video.playbackRate = `${videoSpeed}`;
}
speed.addEventListener('mousemove', function(e){
const posY = e.pageY - this.offsetTop;
const percent = posY / this.offsetHeight;
changeVideoSpeed(percent);
});
})();