html5语法下的video标签，如何通过 ontimeupdate事件来记录当前视频播放的时间点

最新推荐文章于 2024-09-23 14:58:08 发布

阿酷tony

最新推荐文章于 2024-09-23 14:58:08 发布

阅读量619

点赞数 3

分类专栏： html5 网页视频播放器文章标签： html5 音视频前端

本文链接：https://blog.csdn.net/ffffffff8/article/details/139633104

版权

html5 同时被 2 个专栏收录

144 篇文章 6 订阅

订阅专栏

网页视频播放器

51 篇文章 1 订阅

订阅专栏

html5语法下的video标签，如何通过 ontimeupdate事件来记录当前视频播放的时间点

在HTML5语法下，通过video标签的ontimeupdate事件来记录当前视频播放的时间点，可以按照以下步骤进行：

添加事件监听器：首先需要为video元素添加ontimeupdate事件监听器。这个事件会在视频播放位置发生变化时触发。
获取当前播放时间：在ontimeupdate事件的回调函数中，可以使用video对象的currentTime属性来获取当前的播放时间。这个属性返回当前视频播放的时间，以秒为单位。
记录和显示时间点：在事件回调函数中，你可以记录当前的播放时间，并将其显示出来。例如，可以将当前时间打印到控制台或者显示在页面上。

以下是一个具体的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Ontimeupdate Event</title>
</head>
<body>

<video id="myVideo" controls>
<source src="your-video-file.mp4 " type="video/mp4">
您的浏览器不支持视频标签。
</video>

<script>
var video = document.getElementById ("myVideo");
video.on-timeupdate  = function() {
        console.log ("Current time: " + this.currentTime );
        // 可以在这里添加其他逻辑，比如更新UI元素显示当前时间
};
</script>

</body>
</html>

在这个示例中，我们首先通过document.getElementById 获取到video元素，然后为其添加了ontimeupdate事件监听器。在事件回调函数中，我们使用this.currentTime 来获取当前的播放时间，并将其打印到控制台。你也可以根据需要，将这个时间值用于其他目的，比如更新一个进度条或显示在页面上。

需要注意的是，在某些浏览器（如Chrome）中，可能需要通过addEventListener方法来添加事件监听器，因为直接在HTML标签中使用on-timeupdate属性可能不生效。