微信H5记录视频播放进度

需求:javascript

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

面临的问题:缓存

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

设备环境:Iphone 6s 微信微信

处理:ide

  1. 监控离开

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

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

代码清单:
实时记录进度视频

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;
        }
    }

其实我以为个人方法并不完善,发布出来也想知道你们对于这样的需求是怎么处理的,能够讨论一下ip

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

//_currentTime  是从上面的缓存中获取的时间进度
audio.ontimeupdate= function() {
        if(_currentTime > 0) {
            audio.currentTime = _currentTime;
        }
    }
相关文章
相关标签/搜索