html5开发记录视频播放进度

最新推荐文章于 2026-06-06 00:00:15 发布

原创最新推荐文章于 2026-06-06 00:00:15 发布 · 656 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

当前文章被以下社区和专栏收录：

本文介绍了一个JavaScript代码片段，用于在视频播放位置改变时，利用currentTime属性和localStorage存储实时更新当前播放进度，确保跨页面或刷新后能恢复播放状态。

//当目前的播放位置已更改时触发

var chapteridopen="202305124987545454";//该字段为当前视频ID，根据需要自定义，保持唯一性。
   var setTimeFlag = 1;//currentTime属性赋值次数该字段用来记录上次播放进度
   myVideo.addEventListener("timeupdate",function(){
   if (setTimeFlag == 1){

   if (localStorage.getItem('currentTime' +chapteridopen) != null){
   var time = localStorage.getItem('currentTime' +chapteridopen);
   myVideo.currentTime = time;
   lastplayTime=time;

   }
   setTimeFlag = 2;
   }
   //获取当前播放位置的秒数，并设置localStorage
   var currentTime = myVideo.currentTime;
   localStorage.setItem('currentTime' +chapteridopen, currentTime)
   });

标签