HTML 오디오/비디오 DOM timeupdate 이벤트
예시
비디오의 재생 위치가 변경되면 비디오의 현재 위치를 초 단위로 표시합니다.
// Get the <video> element with id="myVideo"
var vid = document.getElementById("myVideo");
// Assign an ontimeupdate event to the <video> element, and execute a function if the current playback position has changed
vid.ontimeupdate = function() {myFunction()};
function myFunction() {
// Display the current position of the video in a <p> element with id="demo"
document.getElementById("demo").innerHTML = vid.currentTime;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
timeupdate 이벤트는 오디오/비디오의 재생 위치가 변경되었을 때 발생합니다.
이 이벤트는 다음에 의해 호출됩니다.
- 오디오/비디오 재생
- 재생 위치 이동(예: 사용자가 오디오/비디오의 다른 지점으로 빨리 감기)
팁: 이 timeupdate 이벤트는 오디오/비디오 재생의 현재 위치를 초 단위로 반환하는 오디오/비디오 개체의 currentTime 속성 과 함께 자주 사용됩니다 .
브라우저 지원
표의 숫자는 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Event | |||||
|---|---|---|---|---|---|
| timeupdate | Yes | 9.0 | Yes | Yes | Yes |
통사론
HTML:
<audio|video ontimeupdate="myScript">
자바스크립트:
audio|video.ontimeupdate=function(){myScript};
JavaScript에서 addEventListener() 메서드를 사용하여 다음을 수행합니다.
audio|video.addEventListener("timeupdate", myScript);
기술적 세부 사항
| 지원되는 HTML 태그: | <오디오>와 <비디오> |
|---|---|
| 지원되는 JavaScript 객체: | 오디오 비디오 |
더 많은 예
예시
오디오의 재생 위치가 변경되면 오디오의 현재 위치를 초 단위로 표시합니다.
// Get the <audio> element with id="myVideo"
var aud = document.getElementById("myVideo");
// Assign an ontimeupdate event to the <audio> element, and execute a function if the current playback position has changed
aud.ontimeupdate = function() {myFunction()};
function myFunction() {
// Display the current position of the audio in a <p> element with id="demo"
document.getElementById("demo").innerHTML = aud.currentTime;
}
예시
currentTime 속성을 사용하여 현재 재생 위치를 5초로 설정:
document.getElementById("myVideo").currentTime = 5;
❮ HTML 오디오/비디오 DOM 참조