[하루 한시간] 화면의 스크롤양에 따른 비디오 재생기능 구현

신지웅·2023년 3월 21일
0

하루 한시간

목록 보기
3/7

스크롤함에 따라 비디오 재생 알고리즘 구현

인터랙티브 웹사이트를 구현하는 과정에서 가장 자주 쓰이는 요소중 하나가 스크롤에 따른 여러가지 애니메이션이다.

오늘은 비디오 객체의 속성을 스크롤과 연결시켜서 스크롤을 하며 내려감에 따라 비디오가 재생되는 기능을 구현하는 전체적 흐름에 대해서 정리해보도록 하겠다.

흐름 :

  1. 우선, 비디오를 감싸는 하나의 섹션을 만드는데, 이때 섹션의 높이(height)를 (비디오의 duration값 * playback변수) 로 설정하여 비디오 길이에 비례하도록 설정한다.
  2. 일단 적당한 위치가 되었을때 비디오가 화면에 픽스되도록 포지션을 변경한다. 이렇게 하면 위에서 설정한 높이만큼 스크롤은 되지만 비디오가 올라가지 않고 화면에 고정되므로 사용자가 플레이되는 비디오를 볼 수 있다.
  3. 비디오 객체의 currentTime속성에 (스크롤되는 양 - 비디오를 감싼 섹션의 상단 위치값) / playback값을 연결한다. currentTime은 설정된 값에 해당하는 비디오의 위치를 재생해준다.

이러한 흐름으로 화면을 스크롤하는 양에 비례하여 비디오를 재생시키는 기능을 구현할 수 있다.

profile
WORLDWIDEWEB

0개의 댓글