동영상 재생 중 자막 큐(cue)가 바뀌는 순간 특정 스크립트를 실행하고 싶다면 oncuechange 속성을 활용하면 됩니다. 이 속성은 HTML의 <track> 요소와 함께 사용되며, 현재 표시 중인 텍스트 트랙의 큐가 변경될 때마다 지정한 JavaScript 코드가 자동으로 실행됩니다.
oncuechange 속성 기본 문법
가장 간단한 사용 형태는 다음과 같습니다. <track> 요소에 oncuechange 속성을 직접 작성하면 큐가 변경될 때마다 해당 이벤트 핸들러가 호출됩니다.
<video>
<track oncuechange = "alert('Changed!')">
</video>실전 예제
아래 코드는 영어 자막 트랙을 동영상에 연결하고, 자막 큐가 변경될 때마다 알림 창을 띄우는 전체 예제입니다. 직접 실행해 보면서 oncuechange 속성의 동작 방식을 확인해 보세요.
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type = "video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
<track src = "subtitles_en.vtt" kind = "subtitles" srclang = "en" label="English" oncuechange = "alert('Changed!')">
Your browser does not support the video element.
</video>
</body>
</html>코드 핵심 포인트
- kind = "subtitles": 이 트랙이 자막 용도임을 명시합니다.
- srclang = "en": 자막의 언어가 영어임을 나타냅니다.
- label = "English": 플레이어에서 사용자에게 표시될 트랙 이름입니다.
- src = "subtitles_en.vtt": 자막 파일은 반드시 WebVTT(.vtt) 형식이어야 합니다.
이처럼 oncuechange 속성을 사용하면 자막이 바뀔 때마다 원하는 동작(알림 표시, 통계 수집, UI 업데이트 등)을 손쉽게 구현할 수 있습니다. 참고로 <video> 요소를 지원하지 않는 구형 브라우저를 위해서는 video 태그 안에 대체 텍스트를 넣어두는 것이 좋습니다.