[DOM_Event] JS - timeupdate 이벤트 - 오디오/비디오 재생 위치 변경 발생 (= timeupdate이벤트 = 타임업데이트이벤트)

목차

1. timeupdate 예제 - 동영상 재생위치 변경 시, 동영상 현재위치를 초단위로 표시
2. timeupdate 정의
3. timeupdate 구문
4. timeupdate 예제 - 오디오 재생위치 변경 시, 오디오 현재위치를 초단위로 표시
5. timeupdate 예제 - currentTime 속성 사용해 현재 재생위치를 5초로 설정

timeupdate 예제 - 동영상 재생위치 변경 시, 동영상 현재위치를 초단위로 표시

 

<video id="hz" width="560" height="315" controls>

  <source src="https://thumbs.gfycat.com/FoolhardyMiserlyAsiantrumpetfish-mobile.mp4" type="video/mp4">

  당신 브라우저는 video 태그 지원 X

</video>

<p>Playback 위치: <span id="demo"></span></p>

<script>

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

hz.ontimeupdate = function() {homzzang()};

function homzzang() {

  document.getElementById("demo").innerHTML = hz.currentTime;

}

</script>

 

timeupdate 정의

 

오디오/비디오 재생 위치 변경 발생 이벤트.

 

---

 

1. 이 이벤트는 다음 경우에 호출됨.

• 오디오/비디오 재생
• 재생 위치 이동 (예: 사용자가 빨리감거나 되감은 경우)

 

2.

오디오/비디오 재생 현재위치를 초 단위로 반환하는 audio/video 객체의 currentTime 속성과 함께 자주 사용됨.

 

3.

• 지원 HTML 태그: <audio>, <video>
• 지원 JavaScript 객체: audio, video
• IE9 이상 주요 최신 브라우저 모두 지원.

 

4. MDN timeupdate 예제 보기

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event

 

timeupdate 구문

 

HTML 방식

<audio|video ontimeupdate="homzzang()">

JS 방식 (2가지)

• audio|video.ontimeupdate=function(){homzzang()};
• audio|video.addEventListener("timeupdate", homzzang);

 

timeupdate 예제 - 오디오 재생위치 변경 시, 오디오 현재위치를 초단위로 표시

 

<audio id="hz" controls>

  <source src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" type="audio/mpeg">

  당신 브라우저는 audio 태그 지원 X

</audio>

<p>Playback 위치: <span id="demo"></span></p>

<script>

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

hz.ontimeupdate = function() {homzzang()};

function homzzang() {

  document.getElementById("demo").innerHTML = hz.currentTime;

}

</script>

결과보기

timeupdate 예제 - currentTime 속성 사용해 현재 재생위치를 5초로 설정

 

<video id="hz" width="560" height="315" controls>

  <source src="https://thumbs.gfycat.com/FoolhardyMiserlyAsiantrumpetfish-mobile.mp4" type="video/mp4">

  당신 브라우저는 video 태그 지원 X

</video><br>

<button onclick="setCurTime()" type="button">재생위치를 5초로 설정</button>

<p id="demo"></p>

<script>

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

// 현재 재생위치 얻기

hz.addEventListener("timeupdate", getCurTime);

function getCurTime() { 

  document.getElementById("demo").innerHTML = "현재 playback 위치: " + hz.currentTime + " 초.";

} 

// 현재 재생위치를 5초로 설정

function setCurTime() { 

  hz.currentTime = 5;

} 

</script>

결과보기