[DOM_Event] JS - ratechange 이벤트 - 재생 속도 변경 이벤트 (= ratechange이벤트 = 레이트체인지이벤트)

목차

1. ratechange 예제 - 재생속도 변경 이벤트 (JS 속성 구문)
2. ratechange 정의
3. ratechange 구문
4. ratechange 예제 - 재생속도 변경 이벤트 (HTML 속성 구문)
5. ratechange 예제 - 재생속도 변경 이벤트 (JS 메서드 구문)

ratechange 예제 - 재생속도 변경 이벤트 (JS 속성 구문)

 

<video id="hz" width="320" height="176" autoplay controls>

  <source src="https://va.media.tumblr.com/tumblr_o600t8hzf51qcbnq0_480.mp4" type="video/mp4">

  님 브라우저는 HTML5 video 태그 지원 X

</video>

<br>

<button onclick="setPlaySpeed()" type="button">재생속도변경</button>

<script>

var vid = document.getElementById("hz");

function setPlaySpeed() { 

  vid.playbackRate = 0.3;

} 

vid.onratechange = function() {homzzang()};

function homzzang() {

  alert("ratechange 이벤트 발생. (재생속도 바뀜.)");

}

</script>

 

결과보기

ratechange 정의

 

오디오/비디오의 재생 속도 변경될 때 발생.

(예 : 사용자가 slow / falst 모드로 전환할 때 발생).

 

---

1.

오디오/비디오 객체의 playbackRate 속성에 의해 호출됨.

(이 속성은 오디오/비디오의 현재 재생 속도를 설정/반환.)

2.

IE9 이상 주요 최신 브라우저 지원.

3.

지원 HTML 태그: <audio>, <video>

지원 JS 객체: Audio, Video

 

ratechange 구문

 

[HTML 속성]

<audio|video onratechange="myScript">

[JS 속성]

audio|video.onratechange=function(){myScript};

 

[JS 메서드]

audio|video.addEventListener("ratechange", myScript);

 

PS. JS 메서드 방식 경우, 앞에 on 안 붙임.

ratechange 예제 - 재생속도 변경 이벤트 (HTML 속성 구문)

 

<video id="hz" width="320" height="176" autoplay controls onratechange="homzzang()">

  <source src="https://va.media.tumblr.com/tumblr_o600t8hzf51qcbnq0_480.mp4" type="video/mp4">

  님 브라우저는 HTML5 video 태그 지원 X

</video>

<br>

<button onclick="setPlaySpeed()" type="button">재생속도변경</button>

<script>

var vid = document.getElementById("hz");

function setPlaySpeed() { 

  vid.playbackRate = 0.3;

} 

function homzzang() { 

  alert("ratechange 이벤트 발생. (재생속도 바뀜.)");

}

</script>

 

결과보기

ratechange 예제 - 재생속도 변경 이벤트 (JS 메서드 구문)

 

<video id="hz" width="320" height="176" autoplay controls>

  <source src="https://va.media.tumblr.com/tumblr_o600t8hzf51qcbnq0_480.mp4" type="video/mp4">

  님 브라우저는 HTML5 video 태그 지원 X

</video>

<br>

<button onclick="setPlaySpeed()" type="button">재생속도변경</button>

<script>

var vid = document.getElementById("hz");

function setPlaySpeed() { 

  vid.playbackRate = 0.3;

} 

 

vid.addEventListener("ratechange", homzzang);

function homzzang() {

  alert("ratechange 이벤트 발생. (재생속도 바뀜.)");

}

</script>

 

결과보기