HTML DOM의 Video ended 속성은 <video> 요소로 재생 중인 동영상이 끝까지 도달했는지 여부를 나타내는 불리언 값(true/false)을 반환합니다.
- true — 동영상 재생이 끝까지 진행되어 종료된 경우
- false — 동영상이 아직 재생 중이거나 아직 시작되지 않은 경우
이 속성은 읽기 전용(read-only)이며, 동영상의 남은 재생 시간을 계산하거나 재생이 종료된 이후 특정 동작을 실행하는 로직을 작성할 때 유용하게 활용됩니다.
구문
ended 속성의 기본 구문은 다음과 같습니다 −
mediaObject.ended
속성에 접근하면 별도의 매개변수 없이 불리언 값이 바로 반환됩니다.
예제
HTML DOM Video ended 속성의 실제 사용 예제를 살펴보겠습니다 −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video ended</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-ended</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="동영상이 끝나기까지 몇 초 남았나요?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
function getTrackDetails() {
if(demo.ended === false)
divDisplay.textContent = '동영상 종료까지 남은 시간: '+(demo.duration - demo.currentTime)+'초';
}
</script>
</body>
</html>
출력 결과
'동영상이 끝나기까지 몇 초 남았나요?' 버튼을 클릭하기 전 화면입니다 −
버튼을 클릭한 후 화면입니다 −
코드 설명
위 예제의 핵심 로직은 다음과 같이 동작합니다.
- <video> 요소와 결과를 표시할 <div> 요소를 각각
getElementById()로 가져옵니다. - 버튼을 클릭하면
getTrackDetails()함수가 실행됩니다. demo.ended === false조건문으로 동영상이 아직 종료되지 않았는지 확인합니다.- 종료되지 않았다면 전체 재생 길이(
duration)에서 현재 재생 위치(currentTime)를 뺀 값을 계산해 남은 시간을 화면에 출력합니다.
만약 동영상이 이미 끝까지 재생되어 ended가 true를 반환한다면, 조건문이 실행되지 않으므로 남은 시간 대신 별도의 안내 메시지를 표시하도록 확장할 수도 있습니다.
함께 알아두면 좋은 관련 속성
- currentTime — 현재 재생 위치(초 단위)를 반환하거나 설정합니다.
- duration — 동영상의 전체 재생 길이(초 단위)를 반환합니다.
- paused — 동영상이 일시정지 상태인지 여부를 반환합니다.
이 속성들을 조합하면 재생 진행률 표시, 자동 다음 영상 재생, 종료 시점 콜백 처리 등 다양한 커스텀 플레이어 기능을 구현할 수 있습니다.