événement ontimeupdate


ontimeupdateÉvénement

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>该实例中我们向 video 元素添加 "ontimeupdate" 事件。当用户开始播放视频，或者重新定位视频播放位置时，会执行显示当前播放位置的函数。</p>
<video controls ontimeupdate="myFunction(this)">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video。
</video>
<p>当前播放位置： <span id="demo"></span></p>
<script>
function myFunction(event) {
    //  currentTime 属性返回视频/音频（audio/video）当前播放位置
    document.getElementById("demo").innerHTML = event.currentTime;
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez Bouton « Exécuter l'instance » pour afficher une instance en ligne

D'autres exemples sont inclus au bas de cet article.

Définition et utilisation

L'événement ontimeupdate est déclenché lorsque la position de lecture actuelle de la vidéo/audio (audio/vidéo) change.

Cet événement est appelé par :

  • Lire la vidéo/audio (audio/vidéo)
  • Repositionner la position de lecture de la vidéo/audio (audio/vidéo) .

Astuce : Cet événement est généralement utilisé avec la propriété currentTime de l'objet Video, Cette propriété renvoie la position de lecture actuelle de la vidéo/audio (audio/vidéo).

Support du navigateur

Le numéro dans le tableau indique le numéro de version du premier navigateur qui prend en charge l'événement.

Événement
Event




ontimeupdateYes9.0YesYesYes

ontimeupdateOui9.0OuiOui Oui

Syntaxe
HTML : <
élément
ontimeupdate="

myScript

">Essayez
JavaScript :
object
.ontimeupdate= function() {

myScript

} ; Essayez
En JavaScript, utilisez la méthode addEventListener() :
object
. seek",

myScript); Essayez-le

是否支持冒泡:No
是否可以取消:No
事件类型:Event
支持的 HTML 标签:<audio>, <video>
Remarque : <🎜> Internet Explorer 8 et les versions antérieures d'IE ne prennent pas en charge la méthode addEventListener(). <🎜><🎜>Détails techniques<🎜>

Plus d'instances

Instances

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>该实例中我们向 audio 元素添加 "ontimeupdate" 事件。当用户开始播放音频，或者重新定位音频播放位置时，会执行显示当前播放位置的函数。</p>
<audio controls ontimeupdate="myFunction(this)">
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>
<p>当前播放位置:  <span id="demo"></span></p>
<script>
function myFunction(event) {
    //  currentTime 属性返回视频/音频（audio/video）当前播放位置
    document.getElementById("demo").innerHTML = event.currentTime;
}
</script>

</body>
</html>

Instance en cours d'exécution»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Instance

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
</head>
<body>
	
<p>该实例中我们向 video 元素添加 "timeupdate" 事件。currentTime属性用户获取当前视频/音频的播放位置。</p>
<video id="myVideo" width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video。
</video><br>
<button onclick="setCurTime()" type="button">设置播放位置为 5 秒</button>
<p id="demo"></p>
<script>
// 获取 id="myVideo" 的 video 元素
var x = document.getElementById("myVideo");
// 向 video 元素添加 timeupdate 事件
x.addEventListener("timeupdate", getCurTime);
// 显示 id="demo" 的 p 元素中视频的当前播放位置
function getCurTime() { 
    document.getElementById("demo").innerHTML = "当前播放位置为 " + x.currentTime + " 秒。";
} 
// 设置播放当前位置为 5 秒
function setCurTime() { 
    x.currentTime = 5;
} 
</script> 

</body> 
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne