[javascript] Video.js를 사용하여 동영상의 반복 재생 기능을 구현하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js는 HTML5 비디오 플레이어 라이브러리로, 다양한 커스터마이징 옵션을 제공합니다. 동영상의 반복 재생 기능을 구현하기 위해서는 Video.js의 반복 재생 기능을 활성화하면 됩니다.

먼저, Video.js를 HTML 문서에 추가해야 합니다. 다음과 같이 <head> 태그 안에 스타일시트와 자바스크립트 파일을 추가합니다.

<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.15.4/video.js"></script>

동영상을 재생할 <video> 요소를 추가합니다. id 속성으로 요소를 식별할 수 있도록 합니다.

<video id="my-video" class="video-js vjs-default-skin"></video>

자바스크립트를 사용하여 Video.js를 초기화하고 반복 재생 옵션을 활성화합니다.

var player = videojs('my-video');

player.on('ended', function() {
  player.currentTime(0); // 동영상의 현재 시간을 처음부터 재생
  player.play(); // 동영상을 재생
});

player.src({ // 동영상 파일을 지정합니다.
  src: 'path/to/video.mp4',
  type: 'video/mp4'
});

위의 코드에서 path/to/video.mp4 부분을 실제 동영상 파일의 경로로 변경해야 합니다.

이제 동영상이 종료될 때마다 자동으로 반복 재생되도록 구현되었습니다.

더 많은 Video.js의 기능과 옵션은 공식 문서(https://docs.videojs.com/)에서 확인할 수 있습니다.

참조: Video.js 공식 문서