HTML5 비디오를 로드 시 자동으로 무한 반복 재생하는 방법

HTML5 <video> 태그로 무한 반복 재생 구현하기

HTML5의 <video> 태그는 웹 페이지에 동영상을 삽입할 때 사용하는 요소입니다. 현재 <video> 요소에서 지원되는 비디오 포맷은 총 세 가지로, MP4, WebM, 그리고 Ogg입니다.

autoplay 속성으로 자동 재생 설정

autoplay 속성을 사용하면 페이지가 로드될 때 비디오가 자동으로 재생됩니다. 사용자가 재생 버튼을 클릭하지 않아도 즉시 영상이 시작되므로, 배경 영상이나 홍보용 짧은 클립에 유용합니다.

loop 속성으로 무한 반복 재생

loop 속성은 불리언(boolean) 속성입니다. 이 속성이 지정되면 비디오가 끝날 때마다 자동으로 처음부터 다시 재생되어 무한히 반복됩니다. 별도의 JavaScript 코드 없이 HTML 속성만으로 반복 재생을 구현할 수 있습니다.

즉, autoplay와 loop 속성을 함께 사용하면 페이지 로드 시 비디오가 자동으로 시작되고, 종료 후 계속 반복 재생됩니다.

예제 코드

<video width="600" height="500" autoplay loop>
   <source src="movie.mp4" type="video/mp4" />
   <source src="movie.ogg" type="video/ogg" />
   Your browser does not support the video element.
</video>

위 코드에서는 MP4와 Ogg 두 가지 포맷의 소스를 제공하여 다양한 브라우저 환경에서도 영상이 정상적으로 재생되도록 했습니다. 브라우저는 지원 가능한 첫 번째 소스를 자동으로 선택해 재생합니다.

loop 속성이 작동하지 않을 때: ended 이벤트 활용

일부 브라우저나 특정 상황에서 loop 속성이 기대대로 작동하지 않는다면, JavaScript로 대체할 수 있습니다. 비디오 재생이 끝났을 때 발생하는 ended 이벤트를 감지하고, 이벤트 발생 시 play() 메서드를 호출하면 됩니다.

const video = document.querySelector('video');
video.addEventListener('ended', () => {
   video.play();
});

이 방식은 반복 재생 로직을 직접 제어할 수 있어, 반복 횟수 제한이나 조건부 재생 등 더 복잡한 요구 사항이 있을 때도 활용할 수 있습니다.