• 회원가입
  • 로그인

[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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012