HTML onratechange 속성으로 재생 속도 변경 시 스크립트 실행하기

HTML에서 동영상이나 오디오의 재생 속도가 변경될 때마다 특정 스크립트를 실행하려면 onratechange 속성을 사용하면 됩니다.

onratechange 속성이란?

onratechange 이벤트는 비디오 또는 오디오 같은 미디어 요소의 재생 속도(playbackRate)가 변경될 때마다 발생합니다. 사용자가 배속 조절 기능을 이용하거나 JavaScript로 playbackRate 값을 수정할 때마다 이 이벤트가 트리거되므로, 실시간으로 속도 변화에 반응하는 UI를 만들 때 유용합니다.

예제

아래 코드를 실행하면 onratechange 속성의 동작을 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <body>
      <video id = "myid" width = "320" height = "176" controls onratechange = "display()">
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the video element.
      </video>
      <p id="test">Change the speed of the video</p>
      <input type = "range" min = "0.1" max = "3" step = "0.2" value = "1"oninput = "update(this)">
      <script>
         function display() {
            document.getElementById("test").innerHTML = "Speed: " + document.getElementById("myid").playbackRate;
         }
         function update(ob) {
            document.getElementById("myid").playbackRate = ob.value;
         }
    </script>
   </body>
</html>

코드 설명

<video> 요소: onratechange="display()" 속성을 추가하여 재생 속도가 바뀔 때마다 display() 함수가 호출되도록 설정했습니다.
<input type="range">: 0.1배속부터 3배속까지 0.2씩 조절할 수 있는 슬라이더로, 값을 움직이면 update() 함수가 실행되어 비디오의 playbackRate가 변경됩니다.
display() 함수: 속도가 변경될 때마다 현재 playbackRate 값을 화면에 실시간으로 출력합니다.

실행 결과

위 코드를 실행하면 비디오 플레이어와 함께 배속을 조절할 수 있는 슬라이더가 나타납니다. 슬라이더를 움직여 재생 속도를 변경하면 onratechange 이벤트가 발생하고, 변경된 재생 속도가 즉시 화면에 표시됩니다.

HTML onratechange 속성으로 재생 속도 변경 시 스크립트 실행하기