[HTML] Video 태그 원하는 구간 반복시키기

요즘 아침에 공부하면서 보는 책이 있는데, 음성 파일이 네이버 블로그에 업로드 되어 제공되고 있다.

영상 시작할 때 앞에 레슨, 유닛 정보를 언급하기 때문에 반복해서 들을 때 매우 거슬렸다.

찾아보니 아주 쉽게 컨트롤이 가능했다.

 

 

1. 전체 반복시키기

전체 반복은 쉽다. loop 속성만 추가해주면 된다.

 

 

2. 원하는 구간 반복시키기

1) ended 사용하는 방법

추가했던 loop 속성을 제거해줘야 한다.

video loop 설정되어 있는 경우 비디오가 끝날 때 내부적으로 다시 재생되기 때문에 ended가 동작하지 않기 때문이다.

const video = document.getElementById('video'); // id가 없으면 만들어주기
video.addEventListener('ended', () => {
  video.currentTime = 6; // 시작 시간(초)
  video.play();
});

 

 

2) timeupdate 사용하는 방법

timeupdate는 currentTime이 갱신될 때 발생하는 이벤트다.

따라서 반복하고 싶은 구간이 6초~55초일 때 아래와 같이 설정하면, 55초가 되었을 때 6초로 초기화 되면서 계속해서 반복하게 된다.

const video = document.getElementById('video');
video.addEventListener('timeupdate', () => {
  if (video.currentTime >= 55) { // 종료 시간(초)
    video.currentTime = 6; // 시작 시간(초)
    video.play();
  }
});