HTML DOM의 Video loop 속성은 비디오 재생이 끝났을 때 자동으로 다시 재생할지 여부를 나타내는 불리언(Boolean) 값을 반환하거나 설정합니다. 이 속성을 활용하면 JavaScript만으로도 비디오 반복 재생 기능을 손쉽게 제어할 수 있습니다.
문법(Syntax)
1. loop 값 반환하기
현재 설정된 불리언 값(true/false)을 반환합니다.
mediaObject.loop
2. loop 값 설정하기
booleanValue를 지정하여 반복 재생 여부를 설정합니다.
mediaObject.loop = booleanValue
여기서 booleanValue에 들어갈 수 있는 값은 다음과 같습니다.
| booleanValue | 설명 |
|---|---|
| true | 비디오가 재생 종료 시 자동으로 다시 재생됩니다. |
| false | 비디오가 재생 종료 후 자동으로 다시 재생되지 않습니다. |
예제(Example)
다음은 Video loop 속성의 실제 동작을 확인할 수 있는 예제입니다. 버튼을 클릭하면 비디오의 loop 속성이 true로 변경되고, 화면에 현재 상태가 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video loop</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Video-loop</legend>
<video id="demo" width="320" controls><source src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
<input type="button" onclick="getTrackDetails()" value="Loop Video Tutorial">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
divDisplay.textContent = 'Video loop: '+demo.loop;
function getTrackDetails() {
demo.loop = true;
demo.load();
divDisplay.textContent = 'Video loop: '+demo.loop;
}
</script>
</body>
</html>실행 결과(Output)
'Loop Video Tutorial' 버튼을 클릭하기 전에는 현재 loop 속성 값이 화면에 표시됩니다.
버튼을 클릭한 후에는 loop 속성이 true로 설정되어, 비디오가 종료되면 자동으로 처음부터 다시 재생됩니다.
정리
Video loop 속성은 HTML5 비디오 요소의 반복 재생 여부를 JavaScript로 동적으로 제어할 수 있는 유용한 기능입니다. 웹 페이지에서 배경 영상이나 홍보 동영상 등을 무한 반복 재생해야 할 때 특히 활용도가 높습니다. 참고로 HTML 태그에서는 <video loop>처럼 속성 자체만으로도 반복 재생을 설정할 수 있으며, DOM 속성을 사용하면 사용자 인터랙션에 따라 실시간으로 값을 변경할 수 있다는 점이 차별화된 장점입니다.