vue 实现video视频播放进度保存

最近在做一个项目，要求前端发送video的播放记录，后台保存对应的时间和状态，用户下次进入页面，根据对应的信息加载video。最开始请教了一下前辈，使用了定时器的方法，每隔一段时间向后台发送对应的观看进度，然后暂停、切换等状态也发送对应的请求，但是，最后发现，如果用户拉动进度条然后立即推出，可能导致无法记录，最后采用了自己的一个思路，暂时实现了效果，可能有许多地方存在问题。

想法如下，三个用户操作记录对应的信息

1：用户切换视频，记录上一个视频观看进度

2：用户关闭浏览器，记录视频观看进度

3：用户刷新浏览器，记录视频观看进度

切换视频时，直接调用对应的函数，在切换video地址之前，记录一次信息即可，如有执行顺序问题，可采用链式调用的方式，或者结合一些es6的语法。这里会有一个问题，页面初次加载时，也会有切换视频的操作，此时不需要记录播放进度，我这里是加了一个判断处理

if (document.getElementsByTagName('video')[0].currentTime) {

('记录对应的观看进度->加载对应的视频信息(地址,currentTim等) return')

}

('加载对应的视频信息(地址,currentTim等)')

然后是对应的浏览器事件记录信息，最开始采用的是beforeDestroy()，最查资料发现beforeDestroy,destroyed是在被vue 被销毁的时候才会触发,但是页面刷新并没有触发vue 的销毁,它仅仅是浏览器的主动行为.后面解决采用了beforeunload事件解决，当浏览器窗口关闭或者刷新时，会触发beforeunload事件

采用beforeunload事件，记录对应的视频信息，会发现获取不到对应的节点信息，最后自己采用了本地存储解决代码如下: