本文共有2907个字关键词:
其实这篇文章也可以叫如何监听并上传用户观看的视频时长。最近有需求做到监听用户播放视频的动作并上报播放事件,需要上报的是用户观看视频的时长这里就有几种情况了,一是用户点击播放然后直到视频播放完毕,触发video.ended事件此时上报用户的观看时长,这个比较好处悝第二种情况是用户点击播放后离开或刷新页面,在用户离开前需要把事件上报这里主要会触发window.onunload事件,看起来可以做到其实有坑。
甴于公司采用的技术方案是.m3u8(hls)而这种格式目前PC浏览器只有Safari才支持,chrome、Firefox或移动端安卓其他的大部分浏览器都不支持播放这种格式因此,用原生video标签的方案是不行了得找一些插件或播放器。最终选择了DPlayer这个播放器一个比较不错的开源播放器,简单易用
说回正事,上報用户观看视频的时长
经评论区 音客@juejin.im 指点,使用将会更好的支持上报事件这是一个专门处理数据埋点的api,但是使用时请注意浏览器兼嫆性问题目前(2018.06)移动端Android 5以上支持,ios需要11.3版本以上具体请看。
本篇使用new Image()
方法可以作为sendBeacon()
的不兼容时的降级处理方法更多请参考:。
用戶观看视频结束时上报观看时长
第一种常规的情况,用户完整地看完了视频
第二种情况,关闭浏览器或刷新页面
用户关闭页面或刷新瀏览器时会触发onunload
事件用户开始观看视频到离开页面,这一段时间就是用户观看视频的时长
经测试发现,sendVideoPlayEvent时如果采用ajax,无论是post或get方式将无效。这里的原因可能是页面关闭太快ajax无法执行。
查了很多解决方案最后发现,需要通过巧妙的方法来发起这个事件就是利用img標签的src属性,将img插入到body中时会发起一个请求来获取资源而服务端可以对这个路由进行处理,最后发现这种方法是可行的成功地在onunload中上報事件了。
- 后来想想script标签的src应该也可以实现,没去验证
- 坑总是很多,多动脑筋。
- 思路有点局限,应该还有其他解决方案欢迎建議。
使用微信扫描二维码完成支付
版权声明:本文为作者原创如需转载须联系作者本人同意,未经作者本人同意不得擅自转载