HTML과 JavaScript를 함께 사용하면 손쉽게 재생 목록(플레이리스트)을 만들 수 있습니다. 핵심은 onended 이벤트입니다. 이 이벤트는 오디오나 비디오 재생이 끝났을 때 발생하며, 이를 활용해 다음 미디어를 자동으로 불러오거나 "시청해 주셔서 감사합니다", "다음 영상도 기대해 주세요!" 같은 메시지를 표시할 수 있습니다.
onended 이벤트 기본 예제
아래 코드를 실행하면 onended 속성이 어떻게 동작하는지 확인할 수 있습니다. 재생이 종료되면 알림 창에 감사 메시지가 나타납니다.
<!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>재생 목록으로 다음 영상 자동 재생하기
onended 이벤트 안에서 다음 클립의 경로를 지정하면, 한 영상이 끝난 직후 자동으로 다음 영상을 이어서 재생하는 플레이리스트를 구현할 수 있습니다.
<script>
var next = "path/of/next/video.mp4";
var video = document.getElementById('video');
video.onended = function() {
video.src = next;
video.play();
}
</script>
<video id = "video" src = "path/of/current/video.mp4" autoplay autobuffer controls />활용 팁
여러 개의 영상을 순차적으로 재생하려면 파일 경로를 배열로 관리하고, onended 이벤트마다 인덱스를 증가시켜 다음 소스를 할당하는 방식을 권장합니다. 이렇게 하면 재생 목록이 끝났을 때 첫 번째 영상으로 되돌아가는 반복 재생 처리도 간단하게 추가할 수 있습니다.