[javascript] Video.js를 사용하여 동영상 재생 중에 특정 구간을 반복 재생하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

아래는 Video.js를 사용하여 동영상 재생 중에 특정 구간을 반복 재생하는 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
</head>
<body>
  <video id="my-video" class="video-js" controls>
    <source src="my-video.mp4" type="video/mp4">
  </video>

  <script>
    var player = videojs('my-video');
    var start = 10; // 반복 재생 시작 시간 (초)
    var end = 20; // 반복 재생 끝 시간 (초)
  
    player.on('ended', function() {
      player.currentTime(start);
      player.play();
    });
    
    player.on('timeupdate', function() {
      if (player.currentTime() >= end) {
        player.pause();
        player.currentTime(start);
        player.play();
      }
    });
  </script>
</body>
</html>

위의 예제 코드에서 my-video.mp4는 재생할 동영상 파일의 경로로 수정해야 합니다. start 변수는 반복 재생을 시작할 시간(초)을 지정하고, end 변수는 반복 재생을 끝낼 시간(초)을 지정합니다.

ended 이벤트는 동영상이 끝날 때마다 호출되며, timeupdate 이벤트는 재생 중인 동영상의 재생 시간이 변경될 때마다 호출됩니다. 이를 이용하여 동영상을 반복 재생할 수 있습니다.

Video.js 공식 문서에서 더 자세한 정보를 확인할 수 있습니다.