html5 video 实时监测当前播放时间

最新推荐文章于 2025-06-18 19:16:25 发布

Lear_博客

最新推荐文章于 2025-06-18 19:16:25 发布

阅读量2.8w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端开发 - HTML/HTML5 文章标签： html5 video currentTime

本文链接：https://blog.youkuaiyun.com/qq_39292868/article/details/81391246

前端开发 - HTML/HTML5 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用HTML5视频标签及JavaScript实现的视频播放时间监听方法。通过为video元素添加事件监听器，可以实时获取视频播放进度，并在指定时间点执行特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<video id="video" controls autoplay="autoplay" muted>
	<source src="" type="video/mp4" />
	Your browser does not support the video tag.
</video>

js:

//监听播放时间
var video = document.getElementById('video');
//使用事件监听方式捕捉事件
video.addEventListener("timeupdate",function(){
    var timeDisplay;
	//用秒数来显示当前播放进度
	timeDisplay = Math.floor(video.currentTime);
	console.log(Math.floor(video.currentTime))
    //当视频播放到 4s的时候做处理
	if(timeDisplay == 4){
	        //处理代码
	}
},false);