需求详情

已有的课程视频播放器，课程中刷新页面会跳转回目录第一个视频；没有观看记录和上次观看位置； 视频观看中途结束观看（关闭页面，刷新页面），再次进入从上一次观看结束点继续播放

方案选择

1. 轮询后台接口记录播放时间点

这种方式会很大的增加后台服务压力，按时间间隔调用接口记录，记录到的视频时间点也不准确，因此未采用这种方式

2. 通过beforeunload事件监控页面关闭、刷新操作，记录播放时间点

这种方式对前后端后比较友好，记录时间也比较准确，最后采用这种方式

功能实现

1.视频播放过程中记录实时记录视频播放的时间点

2.created或mounted阶段监听beforeunload事件，并把此时的视频时间点传递给后台进行记录

mounted () {
 // 在即将离开当前页面(刷新或关闭)时执行
   window.addEventListener('beforeunload',e => {
       this.beforeunloadHandler(e) // 这块处理记录学时需要的代码
   })
 },

3.再次点开视频，从上次的时间点播放

首先获取后台记录的视频时间节点 然后把时间点配置给初始化的播放器，播放器将自动跳转到该时间点

本文使用 mdnice 排版