목차
onratechange 예제 - <audio> 경우
onratechange 정의
onratechange 구문
onratechange 예제 - <video> 경우
onratechange 예제 - <audio> 경우
[예제] - 오디오 재생속도 조절/표시
<audio id="hz" controls onratechange="homzzang()">
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
당신 브라우저는 audio 태그 지원 X
</audio>
<p id="demo">오디오 재생속도 변경:
<input type="range" min="0.5" max="3" step="0.1" value="1"oninput="changeRate(this)">
</p>
<script>
var hz = document.getElementById("hz");
var demo = document.getElementById("hz");
function homzzang() {
demo.innerHTML = "재생속도: " + hz.playbackRate;
}
function changeRate(obj) {
hz.playbackRate = obj.value;
}
</script>
[예제] - 재생속도 느리게 설정 시 실행
<audio id="hz" controls onratechange="homzzang()">
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
당신 브라우저는 audio 태그 지원 X
</audio>
<br><br>
<button onclick="setPlaySlowly()" type="button">재생속도 느리게 변경</button>
<script>
var hz = document.getElementById("hz");
function setPlaySlowly() {
hz.playbackRate = 0.3;
}
hz.onratechange = function() {homzzang()};
function homzzang() {
alert("홈짱닷컴 Homzzang.com");
}
</script>
onratechange 정의
(오디오/비디오) 재생속도 변경 시 실행할 코드 지정.
1. onratechange 속성 사용 가능 태그 종류
<audio> , <video>
2.
IE9 이상 주요 최신 브라우저 모두 지원.
onratechange 구문
HTML 방식
<element onratechange="myScript ">
JS 방식 (3가지)
object. onratechange = ()=> {myScript };
object .onratechange = function(){myScript };
object .addEventListener("ratechange", myScript );
[속성값]
myScript
(오디오/비디오) 재생속도 변경 시, 실행할 JS 코드
주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
사용 방식 통일 권장.
onratechange 예제 - <video> 경우
[예제 - 비디오 재생속도 조절/표시 ★
<video id="hz" width="560" height="315" controls onratechange="homzzang()">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
당신 브라우저는 video 태그 지원 X
</video>
<p id="demo">
비디오 재생속도 변경: <input type="range" min="0.1" max="3" step="0.1" value="1" oninput="changeSpeed(this)">
</p>
<script>
var hz = document.getElementById("hz");
var demo = document.getElementById("demo");
function homzzang() {
demo.innerHTML = "재생속도: " + hz.playbackRate;
}
function changeSpeed(obj) {
hz.playbackRate = obj.value;
}
</script>
[예제] - 재생속도 느리게 설정 시 실행
<video id="hz" width="560" height="315" autoplay controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
당신 브라우저는 video 태그 지원 X
</video>
<br>
<button onclick="setPlaySlowly()" type="button">재생속도 느리게 변경</button>
<script>
var hz = document.getElementById("hz");
function setPlaySlowly() {
hz.playbackRate = 0.3;
}
hz.onratechange = function() {homzzang()};
function homzzang() {
alert("홈짱닷컴 Homzzang.com");
}
</script>
주소 복사
랜덤 이동