HTML DOM의 Video currentTime 속성은 미디어(비디오)의 현재 재생 위치를 초 단위로 반환하거나 설정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 비디오의 특정 지점으로 이동(seek)하는 기능을 쉽게 구현할 수 있습니다.
문법(Syntax)
현재 재생 위치 가져오기
mediaObject.currentTime
이 코드는 비디오의 현재 재생 시간을 초 단위의 숫자로 반환합니다.
재생 위치 설정하기
mediaObject.currentTime = seconds
원하는 초 단위 값을 할당하면 해당 지점으로 재생 위치가 이동합니다.
예제 코드
다음은 Video currentTime 속성을 활용한 실전 예제입니다. 버튼을 클릭하면 비디오가 15초 지점으로 건너뛰는 동작을 구현했습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video currentTime</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-currentTime</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="Jump some seconds">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
function getTrackDetails() {
demo.currentTime = '15';
divDisplay.textContent = 'Some Seconds Avoided';
}
</script>
</body>
</html>실행 결과
버튼 클릭 전
비디오가 처음부터 정상적으로 재생되고 있으며, 'Jump some seconds' 버튼이 화면에 표시됩니다.
버튼 클릭 후
버튼을 클릭하는 순간 currentTime 속성에 15초 값이 할당되어, 비디오 재생 위치가 즉시 15초 지점으로 이동합니다.
정리
currentTime 속성은 읽기와 쓰기가 모두 가능한(read/write) 속성으로, 오디오(Audio) 요소에서도 동일하게 사용할 수 있습니다. 예를 들어 동영상 강의에서 특정 구간을 건너뛰거나, 광고 이후 본편 시작 지점으로 이동시키는 등 다양한 미디어 컨트롤 기능을 구현할 때 유용하게 활용됩니다.