HTML5에서 비디오를 재생하는데 있어서, 루프(loop) 기능을 추가하는 것은 매우 유용합니다. 이를 통해 비디오가 자동으로 반복해서 재생되도록 할 수 있습니다. 이 글에서는 자바스크립트를 사용하여 HTML5 비디오에 루프 재생 기능을 추가하는 방법을 소개하겠습니다.

비디오 요소 생성하기

루프 재생 기능을 추가하기 전에, HTML5 <video> 요소를 생성해야 합니다. 아래는 예시 코드입니다.

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

위 코드에서 id 속성을 사용해 해당 비디오 요소를 자바스크립트에서 참조할 수 있도록 하였습니다.

자바스크립트로 루프 재생 기능 추가하기

자바스크립트를 사용하여 비디오의 루프 재생 기능을 추가할 수 있습니다. 아래는 예시 코드입니다.

const video = document.getElementById("myVideo");

video.addEventListener("ended", function() {
    video.currentTime = 0;
    video.play();
});

위 코드는 ended 이벤트를 감지하여, 비디오가 종료되면 currentTime을 0으로 설정하고 다시 재생하는 기능을 구현한 것입니다.

테스트 및 루프 재생 확인하기

위의 코드를 사용하여 루프 재생 기능을 추가한 후에는, 해당 비디오를 테스트해보세요. 비디오가 종료되면 자동으로 다시 재생되는 것을 확인할 수 있습니다.

결론

이렇게 자바스크립트를 사용하여 HTML5 비디오에 루프 재생 기능을 추가할 수 있습니다. 루프 재생 기능을 활용하면 비디오가 반복해서 재생되어 원하는 효과를 얻을 수 있습니다. 해당 기능을 활용하여 동영상 감상 사이트나 광고 등에 유용하게 활용할 수 있습니다.

#javascript #html5