微信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;
        }
    }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值