HTML reference manual

Complete list of HTML tags

HTML Audio/Video DOM timeupdate event

The timeupdate event is triggered when currentTime is updated. The triggering frequency of this event is determined by the system, but it will ensure that it triggers every second4-66times (provided that each event handling does not exceed250ms). Encourage user agents to change the frequency of events based on the average cost of system load and event processing, to ensure that UI updates do not affect video decoding.

HTML Audio/Video DOM Reference Manual

Online Example

After the video playback position changes, display the current position of the video in seconds:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio/Using the ontimeupdate event of video-Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<p>In this example, we used HTML DOM to add the "ontimeupdate" event to the video element.
Trigger the function when the user starts playing the video or moves the video playback position, and display the video playback position.</p>
<video id="myVideo" width="320" height="176" controls>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　Your browser does not support HTML5　video tag.
</video>
<p>Play Position: <span id="demo"></span></p>
<script>
//　Get the video element with id="myVideo"
var vid = document.getElementById("myVideo");
//　Add the ontimeupdate event to the video element, and execute the function if the current playback position changes　　
vid.ontimeupdate　=　function()　{myFunction()};
function myFunction()　
{
　　　　//　Display the playback position of the video in the p element with id="demo"　
　　　　document.getElementById("demo").innerHTML　=　vid.currentTime;
}
</script>
</body>
</html>

Test and See ‹/›

Definition and usage

The timeupdate event in audio/Video (audio/video) playback position changes.

This event can be triggered in the following situations:

Play audio/Video (audio/video)
Move audio/Video (audio/video) playback position

Tip: 　The timeupdate event is usually associated with Audio/Video object'scurrentTime Properties are used together, which returns the audio/Video (audio/The playback position (in seconds) of video (audio)

Browser compatibility

IEFirefoxOperaChromeSafari

Syntax

In HTML:

<audio|video ontimeupdate="myScript">Try it out

In JavaScript:

audio|video.ontimeupdate=function(){myScript};Try it out

In JavaScript, use the addEventListener() method:

audio|video.addEventListener("timeupdate", myScript);Try it out

Note: Internet Explorer 8 and earlier IE versions do not support addEventListener() Methods.

Technical details

Supported HTML tags:	<audio> and <video>
Supported JavaScript objects:	Audio, Video

Online Example

When the playback position of the audio changes, display the current playback position of the audio (in seconds):

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio/Using the ontimeupdate event of video-Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<p>In this example, we used the HTML DOM to add the "ontimeupdate" event to the audio element.
Trigger the function when the user starts playing the video or moves the audio play position, and display the video play position.</p>
<audio id="myAudio" controls>
　　<source src="horse.ogg" type="audio/ogg">
　　<source src="horse.mp3" type="audio/mpeg">
　　　Your browser does not support the audio element.
</audio>
<p>Play Position: <span id="demo"></span></p>
<script>
//　Get the audio element with id="myAudio"
var aud = document.getElementById("myAudio");
//　Add the ontimeupdate event to the audio element and execute the function when the play position changes　
aud.ontimeupdate = function()　
{
　　　　myFunction();
};
function myFunction()　
{
　　　　//　Display the play position of the audio in the <p> element with id="demo"
　　　　document.getElementById("demo").innerHTML = aud.currentTime;
}
</script>
</body>
</html>

Test and See ‹/›

Online Example

Set play position using the currentTime property to 5 seconds:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio/Using the ontimeupdate event of video-Basic Tutorial(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">
　　Your browser does not support the video tag.
</video><br>
<button onclick="setCurTime()" type="button">Set Play Position to　5　seconds</button>
<p id="demo"></p>
<script>
//　Get the video element with id="myVideo"
var vid = document.getElementById("myVideo");
//　Add "timeupdate" event to video
vid.addEventListener("timeupdate", getCurTime());
//　Display the playback position of the video in the p element with id="demo"　
function getCurTime()　
{　
　　　　document.getElementById("demo").innerHTML = "Current playback position is "　+　vid.currentTime　+　" seconds.";
}　
//　Set playback position to　5　seconds
function setCurTime()　
{　
　　　　vid.currentTime =　5;
}　
</script>　
</body>
</html>

Test and See ‹/›

HTML Audio/Video DOM Reference Manual

HTML: <template> tag