作者：邓小龙(白展)

“本文为《优酷播放黑科技》系列文章第一篇《自由视角技术体验优化实践》，之后我们会陆续上线《基于WebRTC实现的直播"云多视角"技术解析》《自由视角技术的全链路策略与落地实践》，欢迎点击左上角【阿里巴巴移动技术】关注我们，点关注不迷路 ~“

《这！就是街舞》第四季大家看了吗？不知道有没有小伙伴跟笔者一样，“DNA”都要跟着舞动了起来。除了炸裂的舞台，堪比跨次元的真实观影体验，让用户在自由视角视频体验效果下身临其境：

自由视角视频作为优酷内一种新颖的观看模式，给用户带来了全新的观影体验，在对外的众多合作中作为优酷的亮点内容也引起了较高的关注度。然而随着产品声量的不断扩大，当前自由视角在整体的播放体验及投放链路上还有很多诸如，播放不流畅、内容不清晰、设备覆盖较低等问题需要优化解决。

基于此，优酷技术团队在上半年对自由视角进行了一次全面的优化升级。接下来的内容，我们将从全面优化升级的整体目标，围绕播放体验及用户规模展开，详解优酷播放器团队的整体优化策略及方案。

自由视角是什么

图1

上图1是自由视角视频每帧画面的样式，以下统一叫深度图。

自由视角原理：自由视角视频是在原有播放链路的基础上，新增自由视角算法SDK对每帧深度图进行处理，生成指定角度的画面最终展示给用户。

客户端架构设计

这部分主要会介绍自由视角实现的核心逻辑。中间由两个虚线框隔开的两个模块左边是自由视角在播放器SDK中实现的逻辑，右边是针对自由视角播放体验优化的策略，优化策略在后面会做详细的介绍。

播放业务层：

用户核心交互包括角度旋转齿轮（主要生成角度信息供算方侧使用）、自由视角视频用户提示、转场动画;
通过开关控制做到线上功能可随时打开或关闭。

播放器中间层：主要包括两部分，一是中间层链路改造支持自由视角，二是下载自由视角视频所需要的算法文件，下载完毕以后将文件路径传给算法层使用。

播放器内核层：处理内核与算法层之间的数据交互，然后将算法SDK处理好的纹理数据合成以后直接上屏展示。

下载器：负责优酷点播和直播视频文件的下载，不用针对自由视角做特别的改造，主要是使用到了下载器的多分片下载功能提升下载效率。

算法：这层主要的职责是基于算法将深度图重建生成指定角度的画面。

自由视角性能优化方案

优化方向：首先我们得搞清楚为什么卡顿才能知道如何去优化。经调研，卡顿原因是由于播放器当前数据不足所导致的，播放器需要等待足够的数据以后才能继续播放，所以我们得出结论，提前下载数据、多通道下载、降低视频的码率从这三个方面入手就可以降低卡顿率;

方案尝试：前期我们尝试了预缓存、视频流智能档、内核动态Buffer、多通道下载、自由视角动态降角度、播放器双实例切换降码率、连播预加载、过狂飙模式、视频AV1编码降码率共9种方案。在通过实际可行性调研后，最终确定预缓存、视频流智能档、内核动态Buffer、多通道下载这4种方案。

优化实践

卡顿率优化

1 视频流智能档

上图是智能效果示意图，智能档是根据智能档算法动态去决定下一个TS分片的码率，从而达到动态降低码率的效果。

智能档算法架构图

需要着重介绍的有这么几个点：

智能档控制器与数据源及其他模块的交互和控制：收集视频元数据和播放状态信息（比如缓冲区时长buffer）、网络信息，分片级别的码率/清晰度选择，清晰度切换控制，还有其它数据源链路上的事件响应和超时控制等；
策略引擎框架：支持多种策略实现运行的一个接口/环境/容器，每种算法策略实现根据从播放器内核和网络环境信息等输入，给定一个清晰度选择的输出；
数据链路闭环：客户端决策信息埋点上报，云端数据分析处理，优化后的配置更新或模型下发。其中，策略框架及各种清晰度选择的算法策略实现是整个智能档的核心灵魂，策略框架提供了一个平台，目前，优酷的智能档使用 ABTest 的方式支持了从基于各项离散规则到基于强化学习神经网络模型的多种算法策略的实现，这些算法可以根据配置或模型下发动态调整算法参数，互相对比优化，互相补充。

2 内核动态Buffer

通过策略配置平台统一下发指定策略动态设置内核buffer大小，以达到最大限度利用下载资源的目的。

3 多通道下载

如上图所示，多通道下载技术通过将每个独立的文件拆分成N个小块进行下载，每个小块对应右图一个下载通道，这样就可以通过多个通道并行下载，提高下载效率以达到降低卡顿的目标。

4 预缓存

实现可缓存播控信息和视频流文件；（如下图2所示）
支持策略动态下发视频预缓存大小；（如下图2所示）
自由视角能力大一统：将自由视角能力的配置统一收到播控后台，去掉客户端自由视角能力配置项，这样避免以后播控后台和客户端配置不一致导致产生不可预测的问题。（如下图3所示）

图2

图3

场景覆盖度

由于自由视角算法SDK支持两种渲染模式，基于DIBR的普通模式，以及关闭DIBR的切相机降级模式。在这个条件的基础上，对于性能不足可以良好支持DIBR的设备，通过降级模式进入自由视角，这在技术和产品角度都是可行的。

改造前

改造后

数据对比&效果

业务&技术优化效果：

街舞4自由视角视频（一个月）相较于去年同期街舞3点播总播放量提升近2倍。流畅度提升近70%。

场景覆盖收益：

并不是所有的低端机型都可以支持自由视角的降级模式，因为场景特殊，算法要求的视频输入源的清晰度需要不低于4K，因此处于【4k解码, 支持DIBR】区间的设备才属于本次优化预期提升的范围；
通过这次新增的降级渲染技术改造，新增覆盖近3成低端机型，最终总覆盖度从原来5成（仅支持中高端机型）提升至近8成;

总结

为用户提供更优质、更丰富的观影体验一直是我们优酷秉持的目标，也是我们持续不断探索和尝试的动力。如何让用户感受到技术的温度，而不是仅仅看到的是冰冷的字面和数字上的提升，让更优质的体验是用户切身能感受到的，这是我们未来的努力的一个方向。同时我们也在打造直播自由视角，竭尽所能的去探索更多更新的观影方式。

下周，我们会发布本系列《基于WebRTC实现的直播"云多视角"技术解析》，感谢关注【阿里巴巴移动技术】，我们下篇继续聊。

关注【阿里巴巴移动技术】官方微信公众号，每周 3 篇移动技术实践&干货给你思考！

优酷播放黑科技 | 自由视角技术体验优化实践相关推荐

优酷播放黑科技 | 自由视角技术的全链路策略与落地实践
作者:李晓阳(苏铭) 在<优酷播放黑科技 | 自由视角技术体验优化实践>中我们提出对自由视角观影体验做了很多优化,为何需要做如此多的体验优化,下面将一一解答. 随着5G时代的到来,视频 ...
无人零售的黑科技：RFID技术
无人零售的黑科技:RFID技术无人零售的黑科技:RFID技术说起最近的热门话题,"无人零售商店"当属其一.自去年底,亚马逊推出第一家无人实体超市Amazon Go,到阿里.京东 ...
ipad在线看html5,完美支持Html5 iPad优酷播放体验
完美支持Html5 iPad优酷播放体验作者: 佚名比特网 CNETNews.com.cn 2010-09-09 09:05:30 [导读]采用HTML5和HTTP Live Streaming技 ...
优酷 html flash播放器,优酷播放器提示没有安装flash插件的解决办法
优酷播放器在使用中弹出"没有安装flash"的提示,其他的播放器用起来都没问题,优酷是怎么了?今天给大家讲解一下遇到优酷播放器提示没有安装flash的时候的解决办法,希望能帮助你们 ...
百度文库的wenku前边加wap就能复制，优酷播放页youku后加xia就能直接下载视频
转自:http://blog.csdn.net/penglijiang/article/details/8711382 百度文库的wenku前边加wap就能复制文档,优酷播放页youku后加xia就能 ...
公众号点击图片后变化的互动效果怎么搞？教你用黑科技SVG排版技术提高图文互动性
公众号点击图片后变化的互动效果怎么搞?教你用黑科技SVG排版技术提高图文互动性今天看到央视新闻发送的一则关于'武汉解封'的软文,发现中间点击图片显示的效果挺有意思,随即网上查找了一下原来使用SVG互 ...
优酷播放的html代码,在网页里面嵌入播放优酷视频的js代码
先上代码,然后再讲解一下代码为啥是这样写的: 以上是html部分: js部分代码: function start_play(){ $.getScript('http://player.youku.co ...
Android优酷播放器SDK——Eclipse工程迁移Android Studio遇到问题
Android优酷播放器SDK--Eclipse工程迁移Android Studio遇到问题希望大家看完本文章能解决遇到的问题,如果没有表明清楚问题所在,还望指点一二: 下载优酷视频播放器SDK 导 ...
js脚本控制优酷播放器
给大家介绍种js脚本控制优酷播放器方法,网上的功能不完整,本人改进了一下,含播放,暂停,显示播放按钮,隐藏播放按钮,停止退出. html代码: <!DOCTYPE html> <ht ...

优酷播放黑科技 | 自由视角技术体验优化实践