B站的视频体验进化之路

1. 谭兆歆 - 冷⻤鬼 B 站的视频体验进化之路路

2. 在此键入姓名在此键入tittle

3. 在此键入姓名在此键入tittle

4. ⾃自我介绍 bilibili Web播放器器负责⼈人在 B 站任职五年年，现负责 Web 播放相关⼯工作，即 HTML5 播放器器及播放内核开发、弹幕⽀支持和特效研究、⽤用户体验优化⽅方⾯面。参与的项⽬目有 HTML5 播放器器开发及在B站的全⾯面上线、DASH 内核调研开发、蒙板弹幕、播放⻚页改版与秒开等。

5. ⽬目录⼀一、播放⻚页秒开⼆二、播放体验优化三、弹幕体验优化四、总结与展望

6. ⼏几组数字思科预测到 2022 年年视频将占据全部 IP 流量量的⽐比例例 B 站⽇日均视频播放量量⽹网⻚页最佳打开时间不不应超过的值

7. 2018年年初的 B 站播放⻚页⾸首帧时间80分位 4840±182ms

8. Video First 的优化计划

9. 计划制定 - 流程梳理理流程梳理理，细化关键数据指标

10. 计划制定 - 服务关系梳理理

11. 计划制定 - ⽬目标设定秒开 - ⾛走出舒适圈的挑战

12. 优化实施 - Stage0 优先级 battle —— 最⾼高优先级的就应该是播放原则：除去必需步骤外，其余服务都延到⾸首帧后处理理服务避让，以视频⾸首帧载⼊入完成为回调，触发⻚页⾯面后续逻辑基础样式上报服务 > 播放服务 > 播放器器与⻚页⾯面其他服务

13. 优化实施 - Stage0 将播放器器资源提到最优先位置第 3 个请求载⼊入播放器器资源，第 10 个左右⽹网络请求开始拉流参考youtube的处理理⽅方式 —— 逐帧分析youtube

14. 优化实施 - Stage1 一次负优化原先的播放器器是动态载⼊入的，容器器载⼊入播放器器合并请求后总时间的确降低了了 ~100ms ，但⽩白屏时间变⻓长

15. 优化实施 - Stage1 播放器器结构加载容器器内核弹幕其它模块巨⼤大的宇宙战舰

16. 优化实施 - Stage1 播放器器结构加载容器器内核弹幕其它模块轻量量核⼼心播放器器

17. 优化实施 - Stage1 前后体积对⽐比(GZip)

18. 优化实施 - Stage2 为什什么不不和⻚页⾯面 HTML ⽂文件⼀一起输出呢？充分利利⽤用 NodeSSR 特性由 Node 请求内⽹网服务使⼤大部分 playurl 请求时间保持在 10ms 内

19. 优化实施 - Stage3 Preﬂighted Requests（预检请求）避免第⼀一个请求使⽤用预检请求

20. 优化实施 - Stage3 MSE（Media Source Extensions）初始化与拉流并⾏行行

21. 优化实施 - 播放⼊入⼝口

22. 优化实施 - 播放⼊入⼝口推荐视频播放地址预取视频临近播放结束时请求推荐视频播放地址，节约这部分 S2 时间局部SPA化相关推荐动态刷新当前⻚页⾯面模块，消除这部分的 S0 时间

23. 优化实施 - 播放⼊入⼝口⼊入⼝口部分预取播放器器资源视频播放⻚页前⼀一个⻚页⾯面⼊入⼝口预取播放器器资源⾸首⻚页、空间⻚页、搜索⻚页等热⻔门视频头部缓存预取将热⻔门视频头部资源缓存，与⻚页⾯面同时输出，起播更更快

24. 优化实施 - ⻓长尾优化⻓长尾效应是最终优化的难点 3600 2700 1800 900 0 上海海江苏湖北北浙江湖南天津海海南陕⻄西重庆⼴广东⼴广⻄西四川北北京河南宁夏云南⼭山东贵州辽宁⿊黑⻰龙江吉林林⼭山⻄西安徽内蒙古福建⽢甘肃⻘青海海澳⻔门新疆江⻄西⻄西藏河北北台湾⾹香港

25. 优化实施 - 产品化改造旧版播放⻚页: 播放器器处在⾮非视觉中⼼心、⽆无法⾸首屏展示播放器器、播放器器载⼊入时机太过靠后新版播放⻚页: 播放器器上移、资源优先级最⾼高旧版 VS 新版

26. 优化实施 - Stage优化结果

27. 优化结果

28. 播放体验优化

29. 为什什么使⽤用 MPEG-DASH 格式 MPEG-DASH HLS FLV 标准类型开放标准苹果专有 Adobe专有(FLV) 切⽚片格式 MPD M3U8 Concat 切⽚片编码 fMP4/WebM MPEG2TS FLV 视频编码 H264/H265 H264/H265 H264 VP8/VP9 AAC MP3 AAC AAC MP3 MP3 ⾳音频编码浏览器器⽀支持 dash.js hls.js ﬂv.js ⾳音视频分离⽀支持不不⽀支持不不⽀支持 DRM ⽀支持部分⽀支持不不⽀支持切⽚片时⻓长灵活固定灵活⾃自适应码率⽀支持⽀支持不不⽀支持动态分辨率⽀支持⽀支持不不⽀支持视频体验需求升级 - ⽆无缝切换 - 纯⾳音频播放业内成熟实践 - Youtube - Netﬂix - Twitch B站企业⽂文化⽀支持 - 新技术尝试的⽀支持

30. 播放体验优化 - ⽆无缝切换与卡顿率 MPEG-DASH 是一项通过通用 HTTP 服务器，高质量传输动态自适应参数的媒体信息的技术。相比于 HTTP-FLV 能够针对网速和缓冲区进行动态码率选择与调整，大幅降低卡顿率

31. dash.js VS ﬂv.js

32. 播放体验优化 - 卡顿率 bilibili HTML5 播放器器卡顿对⽐比图 8.00% • • • 校正卡顿统计 5.33% 动态切换码率策略略动态缓冲区策略略 2.67% 0.00% 2018.08 2018.09 2018.10 Dash 卡顿率 2018.11 2018.12 FLV 卡顿率 2019.01

33. 播放体验优化 DASH ⾸首帧优化后占总视频播放量量 60% + 接近于 FLV⾸首帧全⾯面⽀支持 + 国内推⼴广每⽇日 DASH 视频播放量量 DASH 视频播放中卡顿次数对⽐比 FLV 视频下降 70% +

34. 弹幕体验优化

35. 弹幕渲染⽅方式 - CSS3与Canvas CSS3(逐帧添加) Canvas(逐帧绘制) 基于RequestAnimationFrame 但不同浏览器底层对不同弹幕渲染方式消耗不同

36. 弹幕体验优化 - 复⽤用弹幕节点复用弹幕节点避免 DOM 频繁创建与移除

37. 弹幕体验优化 - 复⽤用弹幕节点

38. 弹幕体验优化 - ⾃自动弹幕密度根据页面的性能状况动态调整弹幕密度当用户当前页面性能无法满足用户设定的弹幕数量展示时，播放器会根据一定的规则来动态调整播放器中的弹幕设定，以保证流畅的播放器观看体验。如果存在较为消耗性能的行为，则会影响单个 Frame 耗时，并且导致当时页面 FPS 降低当遇到当前页面中较为消耗性能的行为时，会导致渲染当前 Frame 的耗时变长，从而导致当前页面的 FPS 降低。

39. 蒙版弹幕基于CSS3 mask-image属性的弹幕，配合人工智能学习的路径点制造出防遮挡的效果但有兼容问题，Chromium内核表现最好、FF会闪烁、Edge/IE不支持

40. 蒙版弹幕 - 体积优化玩具的考虑与后果初期直接用了base64整个文件，体积超大，用了新协议体积大幅降低修改path的生成方式还能够进一步缩减体积

41. 蒙版弹幕 - 优化与局限自动降帧策略和弹幕类似的降帧策略 mask-image 在大屏幕下的表现自动降帧无效，即使是静止的蒙版，配合弹幕也相当于每帧渲染了一个巨大的Canvas

42. 总结与展望性能优化后续⼯工作保持现有指标，继续优化，更更完善的灰度⽅方案和实验室弹幕优化与标准展望除了了继续实施优化⽅方案外，争取推标准，从浏览器器引擎的层⾯面推动弹幕和蒙版的优化

43. 在此键入姓名在此键入tittle

44. 在此键入姓名在此键入tittle

45. THANKS