微信H5记录视频播放进度

需求:

微信端看视频,关闭微信的窗口时需要记录当前播放时间,下次在进入的时候从上次保存的进度开始播放

面临的问题:

  1. 监控微信离开页面
  2. 重新进入时候从上传保存的地方播放

设备环境:Iphone 6s 微信

处理:

  1. 监控离开

开始的时候使用onbeforeunload事件,发现微信端离开时并未调用记录进度的脚本
改用 pagehide事件,貌似也没调用记录进度的脚本
因此改用一个折中的方式
使用video.ontimeupdate事件做监控,实时记录进度

2.重新进入的时候需要从上次播放的地方开始播放
开始在视频初始化时设置currentTime进度,并不生效
经过多方折腾,在video.onloadeddata事件中设置,解决了问题

代码清单:
实时记录进度

audio.ontimeupdate = function () {
            
            if(window.localStorage) {
                var courseId = $('#courseId').val();
                if(!playBackCache) {
                    playBackCache = {};
                }
                playBackCache[courseId] = audio.currentTime;
                localStorage.setItem('playBackCache' , JSON.stringify(playBackCache));
            }
        };

在上次记录的进度开始播放

//_currentTime  是从上面的缓存中获取的时间进度
audio.onloadeddata = function() {
        if(_currentTime > 0) {
            audio.currentTime = _currentTime;
        }
    }

其实我觉得我的方法并不完善,发布出来也想知道大家对于这样的需求是怎么处理的,可以讨论一下

PS:
经过测试,在onloadeddata并不会设置audio.currentTime,再次进行改造

//_currentTime  是从上面的缓存中获取的时间进度
audio.ontimeupdate= function() {
        if(_currentTime > 0) {
            audio.currentTime = _currentTime;
        }
    }

你可能感兴趣的:(微信H5记录视频播放进度)