English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
O evento timeupdate é acionado quando currentTime é atualizado. A frequência de gatilho deste evento é determinada pelo sistema, mas garantirá que seja acionado a cada segundo4-66vezes (a premissa é que o processamento do evento não deve ultrapassar250ms). Incentiva os agentes de usuário a alterar a frequência dos eventos com base no custo médio de carga e processamento do sistema, garantindo que as atualizações da UI não afetem a decodificação do vídeo.
Áudio HTML/Manual de Referência DOM de Vídeo
A posição atual do vídeo é exibida em segundos após a alteração da posição de reprodução do vídeo:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Áudio HTML/Uso do evento ontimeupdate-Tutorial Básico(oldtoolbag.com)</title>
</head>
<body>
<p>No exemplo, usamos o HTML DOM para adicionar o evento "ontimeupdate" ao elemento video.
ao ser acionado quando o usuário começa a reproduzir o vídeo ou move a posição de reprodução do vídeo, exibe a posição de reprodução do vídeo.</p>
<video id="myVideo" width="320" height="176"controles>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Seu navegador não suporta HTML5 etiqueta video.
</video>
<p>Posição de reprodução: <span id="demo"></span></p>
<script>
// Obter o elemento vídeo com id="myVideo"
var vid = document.getElementById("myVideo");
// Adicionar o evento ontimeupdate ao elemento video, executar a função se a posição de reprodução atual mudar
vid.ontimeupdate = function() {myFunction()};
function myFunction()
{
// Exibir a posição de reprodução do vídeo no elemento p com id="demo"
document.getElementById("demo").innerHTML = vid.currentTime;
}
</script>
</body>
</html>Testar e ver ‹/›O evento timeupdate no áudio/Vídeo (audio/ao mudar a posição de reprodução do vídeo.
O evento pode ser acionado nas seguintes situações:
reproduzir o áudio/Vídeo (audio/vimeo
mover o áudio/Vídeo (audio/a posição de reprodução do vídeo
Dica: O evento timeupdate geralmente está associado ao Audio/do objeto VideocurrentTime usado juntamente com a propriedade/Vídeo (audio/a posição de reprodução do vídeo (em segundos).
IEFirefoxOperaChromeSafari
No HTML:
<audio|video ontimeupdate="myScript">Experimente:
No JavaScript:
audio|video.ontimeupdate=function(){myScript};Experimente:
No JavaScript, use o método addEventListener():
audio|video.addEventListener("timeupdate", myScript);Experimente:
Atenção: Internet Explorer 8 e versões mais antigas do IE não suportam addEventListener() Métodos.
Detalhes técnicos| Etiquetas HTML suportadas: | <audio> e <video> |
|---|---|
| Objetos JavaScript suportados: | Áudio, Vídeo |
Quando a posição de reprodução do áudio muda, exibe a posição atual de reprodução do áudio (em segundos):
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Áudio HTML/Uso do evento ontimeupdate-Tutorial Básico(oldtoolbag.com)</title>
</head>
<body>
<p>Neste exemplo, usamos o HTML DOM para adicionar o evento "ontimeupdate" ao elemento audio.
Chama a função ao usuário começar a reproduzir o vídeo ou mover a posição de reprodução do áudio e exibir a posição de reprodução do vídeo.</p>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Seu navegador não suporta o elemento audio.
</audio>
<p>Posição de reprodução: <span id="demo"></span></p>
<script>
// Obter elemento audio com id="myAudio"
var aud = document.getElementById("myAudio");
// Adicionar evento ontimeupdate ao elemento audio e executar função quando a posição de reprodução mudar
aud.ontimeupdate = function()
{
myFunction();
};
function myFunction()
{
// Exibir posição de reprodução do áudio no elemento <p> com id="demo"
document.getElementById("demo").innerHTML = aud.currentTime;
}
</script>
</body>
</html>Testar e ver ‹/›Definir posição de reprodução usando a propriedade currentTime 5 segundo:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Áudio HTML/Uso do evento ontimeupdate-Tutorial Básico(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">
Seu navegador não suporta a tag de vídeo.
</video><br>
<button onclick="setCurTime()" type="button">Definir posição de reprodução para 5 segundo</button>
<p id="demo"></p>
<script>
// Obter o elemento vídeo com id="myVideo"
var vid = document.getElementById("myVideo");
// Adicionar o evento "timeupdate" ao vídeo
vid.addEventListener("timeupdate", getCurTime);
// Exibir a posição de reprodução do vídeo no elemento p com id="demo"
function getCurTime()
{
document.getElementById("demo").innerHTML = "A posição de reprodução atual é " + vid.currentTime + " segundo。";
}
// Definir a posição de reprodução para 5 segundo
function setCurTime()
{
vid.currentTime = 5;
}
</script>
</body>
</html>Testar e ver ‹/›