HTML | DOM ontimeupdate 事件

简介

ontimeupdate 事件是 HTML DOM（文档对象模型）中的一个事件，它在音频或视频的 currentTime 属性发生改变时触发。这个事件可以用来监测媒体元素的播放进度。

特点

• ontimeupdate 事件在媒体播放过程中以固定的时间间隔触发，一般为每秒一次。
• 通过监测媒体元素的 currentTime 属性的改变，可以实时获得媒体的当前播放时间。
• ontimeupdate 事件可以与其他媒体事件（如 onplay、onpause、onended 等）配合使用，实现更复杂的媒体控制功能。

语法

<video id="myVideo" src="video.mp4"></video>

<script>
    const video = document.getElementById("myVideo");
    video.ontimeupdate = function(event) {
        // 当媒体播放时间发生改变时的处理逻辑
    };
</script>

示例

下面是一个简单的示例，展示了如何使用 ontimeupdate 事件来实时更新显示媒体的当前播放时间：

<video id="myVideo" src="video.mp4"></video>

<div id="currentTime">0:00</div>

<script>
    const video = document.getElementById("myVideo");
    const currentTimeDisplay = document.getElementById("currentTime");

    video.ontimeupdate = function(event) {
        const currentTime = video.currentTime;
        const minutes = Math.floor(currentTime / 60);
        const seconds = Math.floor(currentTime % 60);
        currentTimeDisplay.innerHTML = minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
    };
</script>

在上面的示例中，我们创建了一个包含 id="myVideo" 的视频元素和一个包含 id="currentTime" 的 div 元素来显示当前播放时间。通过监听 ontimeupdate 事件，我们在事件处理函数中获取当前播放时间，并将其格式化为分:秒的形式，然后更新显示在 div 元素中。

注意事项

• ontimeupdate 事件不保证在每个浏览器中都以完全相同的时间间隔触发，因此不要依赖于特定的时间间隔。
• 在处理 ontimeupdate 事件时，要考虑媒体可能出现的时间间隔不一致性，以确保准确显示和处理播放时间。
• 如果媒体被暂停、播放或重新加载，ontimeupdate 事件会相应地启用、停用或重置。
• 当媒体播放完毕时，可以使用 onended 事件来执行相应的操作。

关于更多的 HTML DOM 事件，可以参考 MDN 文档。