HTML 音频/视频 document timeupdate事件在音频或视频位置发生改变的时候触发。
该事件可以在以下情况被调用:
播放音频/视频（audio/video）
移动音频/视频（audio/video）客户端手动移动播放位置时
音频或视频位置发生改变的时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音频或视频位置发生改变的时候触发-HTML教程www.xuandaima.com</title>
</head>
<body>
<video id="video" controls="controls">
<source src="/Template/Test/src/object.mp4" type="video/mp4">
您的浏览器不支持 HTML5 video 标签。
</video>
<p>播放位置: <span id="demo"></span></p>
<script>
myVid=document.getElementById("video");
myVid.ontimeupdate = function() {
// 显示 id="demo" 的 p 元素中视频的播放位置
document.getElementById("demo").innerHTML = myVid.currentTime;
};
</script>
</body>
</html> | timeupdate 事件通常与 Audio/Video 对象的 currentTime 属性一起使用，timeupdate事件和seeking事件、seeked事件不同的是timeupdate事件在播放时改变的位置也会触发，而seeking和seeked只是在用户主动改变位置时触发。 |
windows系统safari浏览器不支持该属性
在 HTML 中：
<audio|video ontimeupdate="SomeJavaScriptCode">
在 JavaScript 中：
音频对象或视频对象.ontimeupdate=SomeJavaScriptCode;
使用 addEventListener()：
音频对象或视频对象.addEventListener("timeupdate", function()
{
//SomeJavaScriptCode
}
);在 HTML 元素上使用 timeupdate属性
<video id="video" controls="controls" ontimeupdate="myFunction(this)"> <source src="/Template/Test/src/object.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。 </video>
使用 addEventListener() 来监听 timeupdate事件
<script>
var vid = document.getElementById("video");
// 为 video 元素添加 ontimeupdate 事件，如果当前播放位置改变则执行函数
vid.addEventListener("timeupdate", myFunction);
function myFunction()
{
// currentTime 属性返回音频/视频(audio/video)的播放位置
document.getElementById("demo").innerHTML = vid.currentTime;
}
</script>
