실시간 재생 속도 조절 슬라이더 만들기
튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 28 - Video Speed Scrubber 튜토리얼 분류: JavaScript 튜토리얼 설명: 영상 속도를 실시간으로 조절하고 보여주는 슬라이더 만들기 진행기간: 2020년 5월 13일 HTML Video 태그로 웹페이지에 삽입된 영상은 JavaScript를 사용해 속성을 다양하게 변경할 수 있다. 커서 위치에 반응하는 슬라이더를 만들어 영상 재생 속도를 실시간으로 조절해보자. 커서 위치에 따라 슬라이더의 높이 변경하기 우선, 현재 재생 속도를 시각적으로 나타내야 한다. 다음의 코드를 보자. speed는 슬라이더의 배경, bar는 슬라이더에 해당하는 DOM 요소이다. 슬라이더를 마우스 커서와 연동하려면 mousemove 이벤트에 이벤트 리..
2020.05.13