English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML Audio/Video DOM timeupdate Ereignis

Wird currentTime aktualisiert, wird das Ereignis timeupdate ausgelöst. Die Auslösefrequenz dieses Ereignisses wird vom System bestimmt, aber es wird sichergestellt, dass es jede Sekunde ausgelöst wird.4-66mal (vorausgesetzt, dass jedes Ereignisbehandlung nicht länger als}}250ms)。Ermutigen Sie Benutzeragenten, die Frequenz der Ereignisse gemäß der durchschnittlichen Last und der Bearbeitungskosten des Systems zu ändern, um sicherzustellen, dass UI-Updates die Dekodierung des Videos nicht beeinträchtigen.

HTML Audio/Video DOM Reference Manual

Online Example

Die aktuelle Wiedergabeposition des Videos wird in Sekunden angezeigt, nachdem sich die Wiedergabeposition geändert hat:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio/Using the video ontimeupdate event-Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<p>In diesem Beispiel haben wir das HTML DOM verwendet, um dem video-Element den "ontimeupdate"-Event hinzuzufügen.
Führt die Funktion aus und zeigt die Wiedergabeposition des Videos an, wenn der Benutzer mit der Wiedergabe des Videos beginnt oder die Wiedergabeposition verschiebt.</p>
<video id="myVideo" width="320" height="176" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Ihr Browser unterstützt keine HTML5 video-Tag.
</video>
<p>Playback position: <span id="demo"></<span></p>
<script>
// Get the video element with id="myVideo"
var vid = document.getElementById("myVideo");
// Fügen Sie dem video-Element den Event "ontimeupdate" hinzu und führen Sie die Funktion aus, wenn sich die aktuelle Wiedergabeposition ändert  
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 und Verwendung

Der timeupdate-Event in Audio/Video (audio/Der timeupdate-Event wird ausgelöst, wenn sich die Wiedergabeposition des Videos (audio

Dieser Event kann in folgenden Situationen aufgerufen werden:

  • Wiedergabe des Audios/Video (audio/video)

  • Verschieben Sie das Audio/Video (audio/Die Wiedergabeposition des Videos (audio

Hinweis:  Der timeupdate-Event wird normalerweise mit Audio/des Video-ObjektscurrentTime mit Eigenschaften zusammen verwendet, die die Wiedergabeposition des Audios/Video (audio/Die Wiedergabeposition des Videos (in Sekunden).

Browser- Kompatibilität

IEFirefoxOperaChromeSafari

Syntax

In HTML:

<audio|video ontimeupdate="myScript">Versuchen Sie es aus

In JavaScript:

audio|video.ontimeupdate=function(){myScript};Versuchen Sie es aus

In JavaScript, verwenden Sie die Methode addEventListener():

audio|video.addEventListener("timeupdate", myScript);Versuchen Sie es aus

Hinweis: Internet Explorer 8 und frühere IE-Versionen unterstützen dies nicht addEventListener() Methoden.

Technische Details
Unterstützte HTML-Tags:<audio> und <video>
Unterstützte JavaScript-Objekte:Audio, Video

Online Example

Wenn sich der Wiedergabepunkt der Audio abwechselt, wird der aktuelle Wiedergabepunkt des Audios (in Sekunden) angezeigt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio/Using the video ontimeupdate event-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 playback position, and display the video playback 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>Playback position: <span id="demo"></<span></p>
<script>
// Get the audio element with id="myAudio"
var aud = document.getElementById("myAudio");
// Add an ontimeupdate event to the audio element and execute the function when the playback position changes 
aud.ontimeupdate = function() 
{
    myFunction();
};
function myFunction() 
{
    // Display the playback 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 playback position using the currentTime property 5 seconds:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio/Using the video ontimeupdate event-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 playback position to 5 Seconds</button>
<p id="demo"></p>
<script>
// Get the video element with id="myVideo"
var vid = document.getElementById("myVideo");
// Add the "timeupdate" event to the 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