English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'evento timeupdate viene attivato quando currentTime viene aggiornato. La frequenza di attivazione di questo evento è determinata dal sistema, ma viene garantito che venga attivato 4-66 volte al secondo (a condizione che il trattamento di ogni evento non superi i 250ms). Si incoraggia l'agente utente a modificare la frequenza dell'evento in base al carico del sistema e al costo medio di elaborazione degli eventi, per garantire che l'aggiornamento dell'UI non influenzi la decodifica del video.
Manuale di riferimento DOM Audio/Video HTML
Dopo che la posizione di riproduzione del video è cambiata, viene visualizzata la posizione corrente del video in secondi:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di base all'uso dell'evento ontimeupdate degli audio/video in HTML - (oldtoolbag.com)</title>
</head>
<body>
<p>Nei questo esempio, abbiamo utilizzato il DOM HTML per aggiungere l'evento "ontimeupdate" all'elemento video.
Il funzione viene attivata quando l'utente inizia a riprodurre il video o muove la posizione di riproduzione del video, visualizzando la posizione di riproduzione del video.</p>
<video id="myVideo" width="320" height="176" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Il tuo browser non supporta il tag video HTML5.
</video>
<p>Posizione di riproduzione: <span id="demo"></span></p>
<script>
// Ottieni l'elemento video con id="myVideo"
var vid = document.getElementById("myVideo");
// Aggiungere l'evento ontimeupdate all'elemento video, se la posizione di riproduzione corrente cambia, eseguire la funzione
vid.ontimeupdate = function() {myFunction()};
function myFunction()
{
// Mostra la posizione di riproduzione del video nell'elemento p con id="demo"
document.getElementById("demo").innerHTML = vid.currentTime;
}
</script>
</body>
</html>Prova a vedere ‹/›L'evento timeupdate viene attivato quando la posizione di riproduzione dell'audio/video cambia.
Questo evento può essere chiamato nelle seguenti circostanze:
Riprodurre audio/video
Spostare la posizione di riproduzione dell'audio/video
Suggerimento: L'evento timeupdate viene solitamente utilizzato con gli oggetti Audio/Video.currentTime Quando l'attributo insieme a questo attributo restituisce la posizione di riproduzione dell'audio/video (in secondi).
IEFirefoxOperaChromeSafari
In HTML:
<audio|video ontimeupdate="myScript">Prova a fare un tentativo
In JavaScript:
audio|video.ontimeupdate=function(){myScript};Prova a fare un tentativo
In JavaScript, utilizzare il metodo addEventListener():
audio|video.addEventListener("timeupdate", myScript);Prova a fare un tentativo
Attenzione: Internet Explorer 8 e versioni precedenti non supportano addEventListener() Metodo.
Dettagli tecnici| Tag HTML supportati: | <audio> e <video> |
|---|---|
| Oggetti JavaScript supportati: | Audio, Video |
Quando la posizione di riproduzione dell'audio cambia, visualizza la posizione corrente di riproduzione dell'audio (in secondi):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di base all'uso dell'evento ontimeupdate degli audio/video in HTML - (oldtoolbag.com)</title>
</head>
<body>
<p>In questo esempio, abbiamo utilizzato il DOM HTML per aggiungere l'evento "ontimeupdate" all'elemento audio.
La funzione viene attivata quando l'utente inizia a riprodurre il video o muove la posizione di riproduzione dell'audio, visualizzando la posizione di riproduzione del video.</p>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Il tuo browser non supporta l'elemento audio.
</audio>
<p>Posizione di riproduzione: <span id="demo"></span></p>
<script>
// Ottieni l'elemento audio con id="myAudio"
var aud = document.getElementById("myAudio");
// Aggiungi l'evento ontimeupdate all'elemento audio e esegui la funzione quando la posizione di riproduzione cambia
aud.ontimeupdate = function()
{
myFunction();
};
function myFunction()
{
// Visualizza la posizione di riproduzione dell'audio nell'elemento <p> con id="demo"
document.getElementById("demo").innerHTML = aud.currentTime;
}
</script>
</body>
</html>Prova a vedere ‹/›Imposta la posizione di riproduzione su 5 utilizzando l'attributo currentTime Secondi:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di base all'uso dell'evento ontimeupdate degli audio/video in HTML - (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">
Il tuo browser non supporta il tag video.
</video><br>
<button onclick="setCurTime()" type="button">Imposta la posizione di riproduzione su 5 secondi</button>
<p id="demo"></p>
<script>
// Ottieni l'elemento video con id="myVideo"
var vid = document.getElementById("myVideo");
// Aggiungi l'evento "timeupdate" al video
vid.addEventListener("timeupdate", getCurTime);
// Mostra la posizione di riproduzione del video nell'elemento p con id="demo"
function getCurTime()
{
document.getElementById("demo").innerHTML = "La posizione di riproduzione corrente è " + vid.currentTime + " secondi.";
}
// Imposta la posizione di riproduzione a 5 secondi
function setCurTime()
{
vid.currentTime = 5;
}
</script>
</body>
</html>Prova a vedere ‹/›