English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
currentTime이 업데이트될 때마다 timeupdate 이벤트가 발생합니다. 이事件的 발생 빈도는 시스템에서 결정되지만, 초당 발생을 보장합니다.4-66번(각 이벤트 처리가 초과하지 않는 경우에만)250ms）。사용자代理는 시스템의 부하와 이벤트 처리의 평균 비용을 기준으로 이벤트의 빈도를 변경하여 UI 업데이트가 비디오 디코딩에 영향을 미치지 않도록 보장해야 합니다。
비디오의 재생 위치가 변경된 후, 초 단위로 현재 위치를 표시합니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 오디오/video ontimeupdate 이벤트 사용-기본 튜토리얼(oldtoolbag.com)</title>
</head>
<body>
<p>이 예제에서는 video 요소에 "ontimeupdate" 이벤트를 추가하기 위해 HTML DOM을 사용했습니다.
사용자가 비디오를 재생 시작하거나 비디오의 재생 위치를 이동할 때 함수가 발생하며, 비디오의 재생 위치를 표시합니다.</p>
<video id="myVideo" width="320" height="176" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 태그.
</video>
<p>재생 위치: <span id="demo"></span></p>
<script>
// id="myVideo"의 video 요소를 가져옵니다
var vid = document.getElementById("myVideo");
// video 요소에 ontimeupdate 이벤트를 추가하여, 현재 재생 위치가 변경되면 함수를 실행합니다
vid.ontimeupdate = function() {myFunction()};
function myFunction()
{
// id="demo"의 p 요소에 있는 비디오의 재생 위치를 표시합니다
document.getElementById("demo").innerHTML = vid.currentTime;
}
</script>
</body>
</html>시험해보기 ‹/›timeupdate 이벤트는 오디오/비디오(오디오/비디오)의 재생 위치가 변경될 때 발생합니다.
이 이벤트는 다음과 같은 경우에서 호출될 수 있습니다:
오디오 재생/비디오(오디오/비디오)
오디오 이동/비디오(오디오/비디오) 재생 위치
ヒント: timeupdate 이벤트는 일반적으로 Audio/Video 객체의currentTime 속성과 함께 사용하면, 이 속성은 오디오/비디오(오디오/비디오)의 재생 위치(초로 표시)
IEFirefoxOperaChromeSafari
HTML에서:
<audio|video ontimeupdate="myScript">시도해 보세요
JavaScript에서:
audio|video.ontimeupdate=function(){myScript};시도해 보세요
JavaScript에서, addEventListener() 메서드를 사용하여:
audio|video.addEventListener("timeupdate", myScript);시도해 보세요
주의: Internet Explorer 8 그리고 더 이전 IE 버전은 지원하지 않습니다 addEventListener() 메서드.
기술 세부 사항| 지원하는 HTML 태그: | <audio>과 <video> |
|---|---|
| 지원하는 JavaScript 객체: | 오디오, 비디오 |
오디오의 재생 위치가 변경될 때, 현재 오디오의 재생 위치(초로 표시)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 오디오/video ontimeupdate 이벤트 사용-기본 튜토리얼(oldtoolbag.com)</title>
</head>
<body>
<p>이 예제에서는 HTML DOM을 사용하여 audio 요소에 "ontimeupdate" 이벤트를 추가했습니다.
사용자가 비디오를 재생 시작하거나 오디오 재생 위치를 이동할 때 함수가 트리거되고 비디오의 재생 위치를 표시합니다.</p>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 요소。
</audio>
<p>재생 위치: <span id="demo"></span></p>
<script>
// id="myAudio"의 audio를 가져옵니다
var aud = document.getElementById("myAudio");
// audio 요소에 ontimeupdate 이벤트를 추가하고 재생 위치가 변경될 때 함수를 실행
aud.ontimeupdate = function()
{
myFunction();
};
function myFunction()
{
// id="demo"의 <p> 요소에 오디오의 재생 위치를 표시
document.getElementById("demo").innerHTML = aud.currentTime;
}
</script>
</body>
</html>시험해보기 ‹/›currentTime 속성을 사용하여 재생 위치 설정 5 초:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 오디오/video ontimeupdate 이벤트 사용-기본 튜토리얼(oldtoolbag.com)</title>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的 브라우저는 video 태그를 지원하지 않습니다.
</video><br>
<button onclick="setCurTime()" type="button">위디오 재생 위치 설정 5 초</button>
<p id="demo"></p>
<script>
// id="myVideo"의 video 요소를 가져옵니다
var vid = document.getElementById("myVideo");
// video에 "timeupdate" 이벤트를 추가합니다
vid.addEventListener("timeupdate", getCurTime);
// id="demo"의 p 요소에 있는 비디오의 재생 위치를 표시합니다
function getCurTime()
{
document.getElementById("demo").innerHTML = "현재 재생 위치는 " + vid.currentTime + " 초。";
}
// 재생 위치를 설정하려면 5 초
function setCurTime()
{
vid.currentTime = 5;
}
</script>
</body>
</html>시험해보기 ‹/›