微信H5记录视频播放进度

xcc3641 发布于2019-08-22 16:42 / 3290人阅读

摘要：需求微信端看视频，关闭微信的窗口时需要记录当前播放时间，下次在进入的时候从上次保存的进度开始播放面临的问题监控微信离开页面重新进入时候从上传保存的地方播放设备环境微信处理监控离开开始的时候使用事件，发现微信端离开时并未调用记录进度的脚本改用

需求：

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

面临的问题：

监控微信离开页面

重新进入时候从上传保存的地方播放

设备环境:Iphone 6s 微信

处理：

监控离开

开始的时候使用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;
        }
    }

GPU云服务器云服务器记录播放进度 js视频播放进度 h5视频播放花屏 h5视频播放器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94582.html

H5实例教学--微信内嵌视频1（案例浅析）

摘要：但好在中，新增了属性，可以使视频内联播放。以上为该案例主要需要解决的问题。补充资料视频播放优化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上为案例二维码首个H5案例解析从头开始分析在 iOS 上，APP 都是使用的系统自带的浏览器进行页面渲染，video 播放视频的效果是统一的，只需要考虑不同的 iOS ...

quietin 2019-08-20 14:29 评论0 收藏0
H5实例教学--微信内嵌视频1（案例浅析）

摘要：但好在中，新增了属性，可以使视频内联播放。以上为该案例主要需要解决的问题。补充资料视频播放优化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上为案例二维码首个H5案例解析从头开始分析在 iOS 上，APP 都是使用的系统自带的浏览器进行页面渲染，video 播放视频的效果是统一的，只需要考虑不同的 iOS ...

Riddler 2019-08-01 16:22 评论0 收藏0
H5 video使用总结

摘要：相信做过视频需求的同学们都会很头疼，在产品及运营同学不就是在手机上播放一段视频么的简单想法下，我们却遇到了安卓的各种封面不兼容进度条展示全屏播放进度等等各种问题。但是在一些安卓手机下，该属性兼容性太差，各种展示黑屏。相信做过h5视频需求的同学们都会很头疼，在产品及运营同学不就是在手机上播放一段视频么？的简单想法下，我们却遇到了ios、安卓的各种封面不兼容、进度条展示、全屏播放、进度等...

bluesky 2019-06-21 16:16 评论0 收藏0