TimeUpdate事件 | HTML音频/视频

由 hcduguo

定义与用法

timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。

该事件可以在以下情况被调用:

  • 播放音频/视频（audio/video）
  • 移动音频/视频（audio/video）播放位置

提示： timeupdate 事件通常与 Audio/Video 对象的 currentTime 属性一起使用，该属性返回音频/视频（audio/video）的播放位置（以秒计）。

语法格式

HTML 中：

<audio|video ontimeupdate=”myScript“>

JavaScript 中：

audio|video.ontimeupdate=function(){myScript};

使用 addEventListener() 方法:

audio|video.addEventListener(“timeupdate”, myScript);

提示： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

示例代码

该实例中，我们使用了 HTML DOM 为 video 元素添加 “ontimeupdate” 事件。 在用户开始播放视频，或者移动视频的播放位置时触发函数，并显示视频的播放位置。

<script>
    var vid = document.getElementById("myVideo");
    vid.ontimeupdate = function() {
        myFunction()
    };

    function myFunction() {
        document.getElementById("demo").innerHTML = vid.currentTime;
    }
</script>

效果展示：

播放位置:

亲自试试

本文底部包含了更多实例。

浏览器支持

事件
TimeUpdateYesYesYesYesYes

表格中的数字表示支持该事件的第一个浏览器的版本号。

技术细节

支持的 HTML 标签:<audio> 和 <video>
支持的 JavaScript 对象:Audio, Video

更多示例

该实例中，我们使用了 HTML DOM 为 audio 元素添加 “ontimeupdate” 事件。 在用户开始播放视频，或者移动音频的播放位置时触发函数，并显示视频的播放位置。

当音频的播放位置改变时，显示当前音频的播放位置（以秒计）:

<script>
    var aud = document.getElementById("myAudio");
    aud.ontimeupdate = function() {
        myFunction()
    };
    function myFunction() {
        document.getElementById("demo").innerHTML = aud.currentTime;
    };
</script>

效果展示：

播放位置:

亲自试试

使用 currentTime 属性设置播放位置为 5 秒:

<script>
    var vid = document.getElementById("myVideo");
    vid.addEventListener("timeupdate", getCurTime);
    function getCurTime() {
        document.getElementById("demo").innerHTML = "当前播放位置为 " + vid.currentTime + " 秒。";
    };

    function setCurTime() {
        vid.currentTime = 5;
    };
</script>

效果展示：


亲自试试

相关