HTML에서 미디어(오디오·비디오)의 재생이 끝나는 시점에 특정 스크립트를 실행하려면 onended 속성을 사용하면 됩니다. 이 속성은 미디어가 마지막까지 재생된 직후에 자동으로 트리거되며, "시청해 주셔서 감사합니다", "다음 영상도 기대해 주세요!" 같은 메시지를 표시하는 데 활용할 수 있습니다.
onended 속성이란?
onended는 <video> 및 <audio> 요소에 적용할 수 있는 이벤트 속성으로, 미디어 파일이 끝에 도달했을 때 지정한 JavaScript 함수를 호출합니다. 동영상 시청 후 안내 메시지 출력, 다음 콘텐츠 자동 재생, 통계 기록 등 다양한 용도로 응용할 수 있습니다.
예제 코드
아래 코드를 실행하면 onended 속성의 실제 동작을 확인할 수 있습니다. 비디오 재생이 끝나면 alert 창으로 감사 메시지가 표시됩니다.
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls onended = "display()">
<source src = "/html5/foo.ogg" type = "video/ogg" />
사용 중인 브라우저는 video 요소를 지원하지 않습니다.
</video>
<script>
function display() {
alert("시청해 주셔서 감사합니다! 다음 콘텐츠도 기대해 주세요!");
}
</script>
</body>
</html>코드 설명
- <video> 요소에 onended = "display()"를 지정하여 재생 종료 시 display() 함수가 호출되도록 설정했습니다.
- <source> 태그는 재생할 미디어 파일의 경로와 형식(video/ogg)을 정의합니다.
- <script> 블록 내의 display() 함수는 미디어가 끝나면 alert()로 메시지를 화면에 띄웁니다.
이처럼 onended 속성을 활용하면 별도의 복잡한 이벤트 리스너 등록 없이 간단하게 미디어 종료 시점을 감지하고 원하는 동작을 수행할 수 있습니다.