[attribute] HTML - oncuechange 속성 - 트랙의 큐(캡션/자막) 변경 시 실행 (= oncuechange속성 = 온큐체인지속성) ※ oncuechange이벤트 = 온큐체인지이벤트

1. oncuechange 예제 - 텍스트 트랙에서 캡션(자막) 변경 시 실행
2. oncuechange 정의
3. oncuechange 구문

oncuechange 예제 - 텍스트 트랙에서 캡션(자막) 변경 시 실행

 

<video controls>

  <source src="video.mp4" type="video/mp4">

  <track label="English" kind="subtitles" srclang="en" src="english.vtt" default oncuechange="homzzang(event)">

  <track label="Français" kind="subtitles" srclang="fr" src="french.vtt">

</video>

 

<script>

  function homzzang(event) {

    const track = event.target;

    const cue = track.activeCues[0];

    console.log(cue.text);

  }

</script>

 

---

 

<video controls>

  <source src="video.mp4" type="video/mp4">

  <track label="English" kind="subtitles" srclang="en" src="english.vtt" default>

  <track label="Français" kind="subtitles" srclang="fr" src="french.vtt">

</video>

<script>

  const track = document.querySelector('track');

  track.addEventListener('cuechange', function(event) {

    const cue = this.activeCues[0];

    console.log(cue.text);

  });

</script>

 

oncuechange 정의

 

트랙의 큐(cue: 캡션/자막) 변경될 때 실행할 코드 지정.

 

---

 

1. oncuechange 속성 사용 가능 태그 종류

<track>

 

2. 성능에 영향 미칠 수 있으므로 사용 시 주의

• 텍스트 트랙에서 변경이 발생할 때마다 발생하므로, 불필요한 이벤트 핸들러를 많이 추가하면 성능에 영향을 미칠 수 있음.
• 이벤트가 발생하는 시기가 텍스트 트랙의 크기와 관련이 있으므로, 큰 텍스트 트랙에서는 성능 문제가 발생할 수도 있음.

 

 

3.

주요 최신 브라우저 모두 지원. (단, Firefox 제외)

 

---

PS. [참고] - 큐(cue) 의미

• cue는 <track> 요소에서 사용되는 용어 중 하나로, 텍스트 트랙에서 발생하는 캡션 또는 자막의 각각의 단위를 의미함. 예를 들어, 동영상에서 한 사람이 말할 때, 캡션 또는 자막은 그 사람이 말하는 내용을 한 줄씩 표시하며, 이런 각 라인을 「cue」또는 「track playlist」라고 함. 각 cue는 텍스트, 시작 시간, 종료 시간 등의 속성을 가지고 있으며, 이러한 속성을 사용해 각 cue의 내용과 타이밍을 제어 가능함.
• <track> 요소는 kind 속성을 사용하여 트랙의 종류를 지정 가능함. 예를 들어, kind="subtitles"를 사용하면 자막 트랙을 지정함. label 속성을 사용하여 트랙의 레이블을 지정 가능함.
• oncuechange 이벤트는 텍스트 트랙에서 cue(캡션 또는 자막의 내용)이 변경될 때마다 발생함. oncuechange 이벤트를 사용하여 텍스트 트랙에서 발생하는 변경 사항을 처리 가능함.

 

oncuechange 구문

 

HTML 방식

• <element oncuechange="myScript">

 

JS 방식 (3가지)

• object.oncuechange = ()=>{myScript};
• object.oncuechange = function(){myScript};
• object.addEventListener("cuechange", myScript);

---

[속성값]

 

myScript

트랙의 큐(캡션/자막) 변경 시, 실행할 JS 코드

• 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
• 사용 방식 통일 권장.