微信H5视频播放器在海量业务下的实践 F20170416pm qconbj guozhiwei

2020-03-01 76浏览

  • 1.微信H5视频播放器在海量业务下的实践 微信开放平台基础部 郭志伟 (raphealguo) 2017-04-16 mp.weixin.qq.com1 @微信公众平台
  • 2.业务背景 微信⽤用户8亿+ 图⽂文消息30亿+PV * 来⾃自腾讯2016年第三季度业绩报告 * 2015年公众号图⽂文消息⽇日均PV mp.weixin.qq.com @微信公众平台
  • 3.前端遇到什么问题 ⼩小bug容易 引起投诉 ⾼高 巨 本 成 宽 带 的 源 资 富 ， ⼤大 量 访问 快速的产品迭代，导致代码难以维护 某些特定环境下发 ⽣生的⽤用户侧问题难 以 mp.weixin.qq.com @微信公众平台 排查
  • 4.关于这次演讲 1.技术⽅方案可控 2.监控和发现问题 通过灵活的技术⽅方案使 能够通过各种⼿手段发现 得系统可控 排查现⺴⽹网问题 mp.weixin.qq.com @微信公众平台
  • 5.Part1 通过合适的技术⽅方案让系统可控 来⾃自“微信H5播放器”的实践 mp.weixin.qq.com @微信公众平台
  • 6.微信H5播放器 mp.weixin.qq.com @微信公众平台
  • 7.公众号⽂文章访问情况 1. IOS & 安卓访问⽐比例达99% IOS & 99% 其他 1% 2. 安卓⾃自带X5内核Webview 结论：只需开发HTML5版本Video播放器 mp.weixin.qq.com @微信公众平台
  • 8.朴素版播放器状态机 mp.weixin.qq.com @微信公众平台
  • 9.朴素版播放器状态机 mp.weixin.qq.com @微信公众平台
  • 10.朴素版播放器状态机 mp.weixin.qq.com @微信公众平台
  • 11.朴素版播放器状态机 mp.weixin.qq.com @微信公众平台
  • 12.朴素版播放器状态机 mp.weixin.qq.com @微信公众平台
  • 13.朴素版播放器状态机 mp.weixin.qq.com @微信公众平台
  • 14.朴素版播放器状态机 mp.weixin.qq.com @微信公众平台
  • 15.朴素版播放器状态机 容易实现：解决兼容性+解决UI表现 mp.weixin.qq.com @微信公众平台
  • 16.还要实现播放器的扩展功能 mp.weixin.qq.com @微信公众平台
  • 17.播放器需求——前贴⽚片⼲⼴广告 mp.weixin.qq.com @微信公众平台
  • 18.播放器需求——前贴⽚片⼲⼴广告 mp.weixin.qq.com @微信公众平台
  • 19.播放器需求—优化带宽成本 mp.weixin.qq.com @微信公众平台
  • 20.播放器需求—优化带宽成本 mp.weixin.qq.com @微信公众平台
  • 21.播放器需求—优化带宽成本 成本⾼高，迫切需要优化带宽 mp.weixin.qq.com @微信公众平台
  • 22.节省带宽的⽅方案1 1.实时同步拖拽/播放/暂停状态到CDN节点 mp.weixin.qq.com @微信公众平台
  • 23.⽅方案1的缺点 • • 客户端服务器同步操作状态有延时 CDN服务复杂化，不再是纯粹分发资源 mp.weixin.qq.com @微信公众平台
  • 24.节省带宽的⽅方案2 2.采⽤用原⽣生播放器替代H5播放器 mp.weixin.qq.com @微信公众平台
  • 25.⽅方案2的缺点 • • 迭代速度受到客户端发版影响 原⽣生组件覆盖在Webview之上，需要解决滚动问题 mp.weixin.qq.com @微信公众平台
  • 26.思路：把远端的Server搬到本地——本地代理 mp.weixin.qq.com @微信公众平台
  • 27.最终⽅方案: 本地代理proxy mp.weixin.qq.com @微信公众平台
  • 28.最终⽅方案: 本地代理proxy mp.weixin.qq.com @微信公众平台
  • 29.最终⽅方案: 本地代理proxy mp.weixin.qq.com @微信公众平台
  • 30.最终⽅方案: 本地代理proxy mp.weixin.qq.com @微信公众平台
  • 31.最终⽅方案: 本地代理proxy mp.weixin.qq.com @微信公众平台
  • 32.最终⽅方案: 本地代理proxy 把server搬到本地：克服前⾯面⽅方案的缺点 mp.weixin.qq.com @微信公众平台
  • 33.播放器的状态机 mp.weixin.qq.com @微信公众平台
  • 34.播放器的状态机 mp.weixin.qq.com @微信公众平台
  • 35.播放器的状态机 mp.weixin.qq.com @微信公众平台
  • 36.播放器的状态机 状态过于复杂，不可⾏行 mp.weixin.qq.com @微信公众平台
  • 37.朴素版的缺点：系统不可控 • 状态极多，状态之间的跳转控制复杂 • 扩展能⼒力灰度控制很⿇麻烦 • 编写扩展能⼒力的时候，需要侵⼊入原播放器的流程 • 扩展间耦合过重，改动容易会引发bug mp.weixin.qq.com @微信公众平台
  • 38.我们的⺫⽬目标 • 主播放器和扩展解耦 • 扩展之间不知道对⽅方存在 mp.weixin.qq.com @微信公众平台
  • 39.“可热插拔”的思路 mp.weixin.qq.com @微信公众平台
  • 40.“可热插拔”的思路 mp.weixin.qq.com @微信公众平台
  • 41.“可热插拔”的思路 mp.weixin.qq.com @微信公众平台
  • 42.三个关键⾓角⾊色 mp.weixin.qq.com @微信公众平台
  • 43.状态调度器 mp.weixin.qq.com @微信公众平台
  • 44.状态调度器的作⽤用 mp.weixin.qq.com @微信公众平台
  • 45.状态调度器的作⽤用 mp.weixin.qq.com @微信公众平台
  • 46.状态调度器的作⽤用 mp.weixin.qq.com @微信公众平台
  • 47.状态调度器的作⽤用 mp.weixin.qq.com @微信公众平台
  • 48.状态调度器的作⽤用 mp.weixin.qq.com @微信公众平台
  • 49.这个状态调度器能否完成前边的需求？ mp.weixin.qq.com @微信公众平台
  • 50.点击播放视频 点击播放 mp.weixin.qq.com @微信公众平台
  • 51.点击播放视频 点击播放 mp.weixin.qq.com @微信公众平台
  • 52.点击播放视频 点击播放 mp.weixin.qq.com @微信公众平台
  • 53.点击播放视频 点击播放 mp.weixin.qq.com @微信公众平台
  • 54.开始播放⼲⼴广告 mp.weixin.qq.com @微信公众平台
  • 55.开始播放⼲⼴广告 mp.weixin.qq.com @微信公众平台
  • 56.开始播放⼲⼴广告 mp.weixin.qq.com @微信公众平台
  • 57.⼲⼴广告结束 mp.weixin.qq.com @微信公众平台
  • 58.⼲⼴广告结束 mp.weixin.qq.com @微信公众平台
  • 59.⼲⼴广告结束 mp.weixin.qq.com @微信公众平台
  • 60.⼲⼴广告结束 mp.weixin.qq.com @微信公众平台
  • 61.⼲⼴广告结束 mp.weixin.qq.com @微信公众平台
  • 62.播放主视频 mp.weixin.qq.com @微信公众平台
  • 63.播放主视频 mp.weixin.qq.com @微信公众平台
  • 64.播放主视频 mp.weixin.qq.com @微信公众平台
  • 65.proxy换地址 mp.weixin.qq.com @微信公众平台
  • 66.proxy换地址 mp.weixin.qq.com @微信公众平台
  • 67.proxy换地址 mp.weixin.qq.com @微信公众平台
  • 68.proxy换地址 mp.weixin.qq.com @微信公众平台
  • 69.proxy同步状态 mp.weixin.qq.com @微信公众平台
  • 70.proxy同步状态 mp.weixin.qq.com @微信公众平台
  • 71.proxy同步状态 mp.weixin.qq.com @微信公众平台
  • 72.我们还可以完成更多可能的需求 mp.weixin.qq.com @微信公众平台
  • 73.脑洞1：浮层⼲⼴广告 mp.weixin.qq.com @微信公众平台
  • 74.脑洞2：弹幕 mp.weixin.qq.com @微信公众平台
  • 75.设计上存在⼩小问题 插件可以随意切换播放器状态，可能引起混乱 mp.weixin.qq.com @微信公众平台
  • 76.切换能⼒力收归到调度器 mp.weixin.qq.com @微信公众平台
  • 77.调度器内部切换状态 mp.weixin.qq.com @微信公众平台
  • 78.优点 • 可热插拔，可独⽴立灰度插件 • 可装载多个插件 • 每个插件只关注它内部时序，开发极简 • 分开监控，可控发布 • 定位问题容易 mp.weixin.qq.com @微信公众平台
  • 79.合适的技术⽅方案实现只是可控系统的其中⼀一个环节 在发布之后，我们还需要⽇日常运营保证系统的稳定性 mp.weixin.qq.com @微信公众平台
  • 80.Part2 ⽇日常运营如何保障系统的稳定性 mp.weixin.qq.com @微信公众平台
  • 81.难以排查的问题 ⽩白屏时间过⻓长 排版乱了 mp.weixin.qq.com @微信公众平台 图⽚片加载不出来
  • 82.⽆无从查起，难以解决 拉后台， 请求肯定 了 挂 N D C 们 你 S S C 出 不 ，拉 挂了，查 ⼀一下 上线系统把⽂文件搞错了，⼜又故障 这问题在我这没重 现，你⼿手机可能有 问题，重启看看 mp.weixin.qq.com @微信公众平台
  • 83.资源拉取的失败监控 Ajax⺴⽹网络超时 CDN图⽚片加载失败 CDN静态资源拉取失败 图⽚片加载失败率 mp.weixin.qq.com @微信公众平台
  • 84.各个阶段耗时监控 DNS耗时 收包耗时 TCP连接耗时 SSL连接耗时 mp.weixin.qq.com @微信公众平台
  • 85.监控脚本运⾏行时异常 错误地引⽤用空对象的⽅方法 mp.weixin.qq.com @微信公众平台
  • 86.监控脚本运⾏行时异常 资源回源机器没更新资源 mp.weixin.qq.com @微信公众平台
  • 87.监控脚本运⾏行时异常 后台某个CGI出现404 mp.weixin.qq.com @微信公众平台
  • 88.监控能帮助我们主动发现问题 但是⾯面对海量⽤用户，我们还是有很多难以定位的问题 mp.weixin.qq.com @微信公众平台
  • 89.棘⼿手的问题 ⽩白屏时间过⻓长 后台查看监控图表，服务正常 mp.weixin.qq.com @微信公众平台
  • 90.棘⼿手的问题 图⽚片加载不出来 CDN图⽚片服务正常 mp.weixin.qq.com @微信公众平台
  • 91.我们需要有能⼒力恢复⽤用户的现场 mp.weixin.qq.com @微信公众平台
  • 92.在客户端侧记录现场 1.⽇日志系统 把前端运⾏行⽇日志记录在微 信客户端log⽂文件，通过⽤用 户主动上传⽇日志分析现场 ⽤用户主动上传⽇日志 微信App JSAPI写log mp.weixin.qq.com @微信公众平台
  • 93.⽩白屏过久 ⽇日志⾥里边发现DNS解析过久，发现某个⼩小运营商路由问题 mp.weixin.qq.com @微信公众平台
  • 94.在客户端侧展⽰示现场 2.⼿手机端调试⾯面板vConsole 由于⼿手机端要远程调试⺴⽹网⻚页⼗十分困难，我们 开发了调试⾯面板，⽤用于远程定位现场问题 mp.weixin.qq.com @微信公众平台
  • 95.图⽚片⽆无法显⽰示 图⽚片显⽰示成⼀一像素 mp.weixin.qq.com @微信公众平台
  • 96.vConsole开源https://github.com/wechatfe/vconsolemp.weixin.qq.com @微信公众平台
  • 97.⼩小程序调试模式使⽤用vConsole mp.weixin.qq.com @微信公众平台
  • 98.总结 1.技术⽅方案可控 2.监控和发现问题 通过灵活的技术⽅方案使 能够通过各种⼿手段发现 得系统可控 排查现⺴⽹网问题 mp.weixin.qq.com @微信公众平台
  • 99.END Thanks for watching 微信开放平台基础部 郭志伟(raphealguo) 2017-04-16 mp.weixin.qq.com @微信公众平台