前面我介绍了一个videojs插件videojs-resume，但最新发现了一个bug，在版本chrome 50+后，他失效了。查看原因，发现本地可以存储，但是刷新页面本地数据就清零了：
排查官方的代码，终于发现了问题所在：
我们来到这个文件：
https://github.com/Reelhouse/videojs-resume/blob/master/dist/videojs-resume.js
将203行的var resumeFromTime = _store2[‘default’].get(key);代码剪切到193行即可：
下面是原始代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var key = 'videojs-resume:' + videoId; this.on('timeupdate', function () { _store2['default'].set(key, this.currentTime()); }); this.on('ended', function () { _store2['default'].remove(key); }); this.ready(function () { var resumeFromTime = _store2['default'].get(key); if (resumeFromTime) { if (resumeFromTime >= 5) { resumeFromTime -= playbackOffset; } if (resumeFromTime <= 0) { resumeFromTime = 0; } this.addChild('ResumeModal', { title: title, resumeButtonText: resumeButtonText, cancelButtonText: cancelButtonText, resumeFromTime: resumeFromTime, key: key }); } }); |
修改后的代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var key = 'videojs-resume:' + videoId; //移动后的位置 var resumeFromTime = _store2['default'].get(key); this.on('timeupdate', function () { _store2['default'].set(key, this.currentTime()); }); this.on('ended', function () { _store2['default'].remove(key); }); this.ready(function () { if (resumeFromTime) { if (resumeFromTime >= 5) { resumeFromTime -= playbackOffset; } if (resumeFromTime <= 0) { resumeFromTime = 0; } this.addChild('ResumeModal', { title: title, resumeButtonText: resumeButtonText, cancelButtonText: cancelButtonText, resumeFromTime: resumeFromTime, key: key }); } }); |
为什么呢？其实我们只要将这行代码移动到this.ready(function () { 外即可，但这个位置更佳可以防止timeupdate，被调用修改值。造成不必要的有一个错误。
本插件官方地址：https://github.com/Reelhouse/videojs-resume