OTT大屏前端建设之路 | 《优酷OTT互联网大屏前端技术实践》第一章-阿里云开发者社区

开发者社区> 阿里文娱技术> 正文

OTT大屏前端建设之路 | 《优酷OTT互联网大屏前端技术实践》第一章

简介: 本文和大家分享优酷OTT端前端的技术历程。

下一章:OTT端登录态设备穿透:扫码登录与扫码反登录 | 《优酷OTT互联网大屏前端技术实践》第二章>>>

点击免费下载
《优酷OTT互联网大屏前端技术实践》>>>

test

作者| 阿里巴巴文娱技术 默吉

转眼间2020年已过半,我投身到OTT端开发已经5年有余,回首OTT端(酷喵APP)前端建设历程,感慨良多。经历了从0到1的艰难起步,也经历了从1到N的合力前行;有过通宵达旦的debug之夜,也有过阳光和顺的高光时刻。以下和大家分享优酷OTT端前端的技术历程。

一、背景

OTT是什么?

简单来说,“OTT”名词解释为over the top,原为篮球运动名词,“过顶传球”之意,后引申为通过互联网向用户提供各种应用服务,这种服务主要由运营商之外的第三方提供。

OTT端上都有什么?

OTT端开发规范和逻辑与手机端APP属于一脉,一般由Android系统做底层支持,由APP开发人员开发不同类型软件应用。本文中的OTT端建设,为优酷“OTT端酷喵APP”建设。

前端在OTT端扮演什么角色?

说起来,前端开发与APP Native开发为互补关系,OTT端酷喵APP主框架为Native开发实现,而活动坑位投放、部分APP功能页、快速发版补位项目则需要前端介入开发,尤其以“活动坑位投放”最为常见,因其内容形式多样化,发版频率高等特点,并不适合使用Native开发,二者恰巧是前端优势所在。

这几年我们都做了什么?

自2015年的“OTT影视大厅”APP,到后来的“华数牌照方影视”APP,再到现在的“酷喵APP”,历经多轮端APP衍生发展,多次迭代升级优化前端相关能力。

那么OTT端与其它端有很大不同吗?
是的,纵观M端、PC端以及Pad端,用户可以通过鼠标、键盘、触控方式进行页面交互,但在OTT端所有基本操作均依赖“遥控器”进行操作,这也就决定了其人机交互与其它端存在本质差异,“焦点引擎”概念应运而生。

二、焦点引擎

我们先来看看TV用户交互的现状,我们只有一个遥控器,上下左右和ok键能分别映射到键盘的四个方向键和enter键;我们可以监听document的key事件来做焦点的切换逻辑。那么问题来了,作为一个业务开发者,难道要为每个页面花精力去处理“按了一下右键,下一步应该选中哪一块区域”诸如此类的问题?难道就不能像鼠标操作那样指哪打哪?

其实,所谓的“指哪打哪”是认知学上的问题。而无论在什么设备下,用户和开发者对人机交互都有符合心理预期的诉求。只是PC和手机上页面的人机交互都已经做得十分到位,而TV则不然。所以,我们希望通过一些手段,使TV上的页面交互更顺畅自然,尤其对于业务开发者,你的代码逻辑、风格,还有代码量能够趋近于PC和手机端的H5页面就是我们最大的愿景。

作为专注于TV前端开发的团队,我们设计了一套组件树管理和焦点管理的机制,来对TV上的交互行为进行抽象。使它托管页面中焦点的切换,帮助开发者从繁琐的焦点处理中释放出来,开发者只需要专注于业务代码的书写,提高开发效率。

接下来,我们从组件树、焦点管理两个方面对“焦点引擎”进行简单介绍:

组件树

通过对TV端页面的切分,我们大致确定了使用频次比较高的一些模块:水平/垂直列表、多方向无序排列模块、滚动列表等。

我们希望把这些模块抽象成组件,组件内部可以自动实现各个元素间的焦点切换。同时,一个页面中的各个组件间的切换也应该对开发者透明。为此,我们把这些组件以树形结构组织,组件的层次关系有助于生命周期管理和事件流传递,为焦点管理的实现提供良好基础。

Widget是组件的基础类,拥有指向其父节点的属性parentWidget,同时实现增删改查方法管理子节点数组childWidgets。上述模块都是基于基础类的扩展。具体而言,基础类并不直接实现其子节点间的焦点切换功能,而是交由扩展类内部实现,如水平列表实现左右按键的焦点切换,多方向无序排列模块实现了多种焦点感知算法,滚动列表实现了TV端焦点切换时的页面滚动逻辑。下面的例子展现了一个页面的模块划分到组件树的映射过程:

image.png

需要强调的是,虽然html天然就是树形结构,但由于TV中焦点管理相关的逻辑和事件并没有原生实现,所以我们仍然需要把dom树映射成组件树以方便功能注入。

焦点管理

焦点管理主要有两个技术点,其一是事件模拟和组件树中的事件流管理,其二是焦点链路的构建。

尽管js里支持keydown、focus、blur这样的事件,但这些事件只能够在可选中的元素(focusable elements)或document上触发。TV上对于可选中的定义则要复杂得多,几乎所有的视觉元素都是可选中的,默认的切换行为往往无所适从。

我们对组件模块增加on、detach、fire这样的事件管理方法,事件的触发允许在组件树中冒泡。另外实现了Event.Base事件类,可以方便地扩展出事件流中传递的事件,如Event.KeyEvent、Event.FocusEvent、Event.SelectEvent等。

有了事件的模拟,焦点情况已然明朗开来:如果是组件切换逻辑的触发,整个流程应该从最左端开始;如果通过调用组件的focus()方法进行聚焦,则从focus这一步开始。焦点切换的执行流程大致如下图所示,

image.png

以上就是OTT端的特色点“焦点引擎”介绍,这属于技术层面的基础架构支撑。回归到业务中,正如上文所讲,“活动坑位投放”开发为前端开发业务重头戏,我们以“可视化搭建”为方向,提高开发效率、提升页面质量。并在其它业务并行情况下,进行能力升级,积极拓展前端赋能。
前端能力覆盖也由最早期活动投放页面开发,延伸到现阶段的OTT端页面搭建、半屏互动、APP功能单元、质量监控等多个领域。而在前端加载体验方面,也取得质的提升,尤其是秒开率、crash率等指标。在这个漫长的建设过程中,我们大体经历了三个阶段 “石器时代”、“农耕时代”、“工业时代”。

三、时代建设

石器时代---源码开发时期(AWP)

最开始主要以源码开发为主,每个活动都需要开发同学从零开始搭建,效率低,当活动积累了一定阶段后,我们抽离出通用组件,开发效率上稍有好转,比如3天的开发变成了1.5天。但本质上没有解决问题,尤其是当运营的活动页面需要频繁调整时,前端同学被折磨的死去活来。运营一点内容的修改,比如更换图片的位置大小等,前端都会发布新的版本,硬编码的这种方式确实是硬伤。尤其到了双11,前端集体上阵,被活动页面折磨的好生痛苦……这个时期持续了半年多,大家寻找着新的方式。

问题:源码开发比较方便,符合前端开发习惯,通过常用组件的沉淀效率有所提升,但无法解决活动页面频繁调整的问题。
【AWP源码开发】
image.png

农耕时代---模版开发时期(TMS/Zbra)

这个时期主要是模版化时期,通过坑位的配置解决开发效率的问题,技术同学与UED沟通制定出通用的OTT端通用型模版,例如每周大片专题模版、棋牌抽奖活动、倒计时模版等等,基本解决了运营效率的问题。
问题:这种方式依然有局限性,需要用约定的形式规范化内容,限制运营同学的创造力。这一阶段持续了半年之久,可以满足运营的基础需求,但面对不断推陈出新的活动形式,模版方式显得越来越力不从心……
【TMS活动模版】

image.png

【Zebra斑马模版】

image.png

工业时代---可视化搭建时期(ARK搭建平台)

最终,我们参考了阿里集团的可视化搭建系统,2017年尝试打造一套适合TV端的搭建方案。如果从零开始,肯定是一条漫长之路,涉及很大的开发量。由于之前一直在使用阿里集团内B搭建系统,我们发现这些能力B系统都基本具备,那么我们为什么不借力,站在巨人的肩膀上?于是我们将页面的托管能力收敛到B系统的底层服务上。接下来,我们开始了研发阶段,当时投入的同学还历历在目,服务端开发震动负责对接B系统的所有node服务,我主要负责前端部分,经过2个多月的努力,我们发布了第一个beta版本「2016-11-04」。
【ARK可视化搭建】

image.png

超越时代---前端多元化赋能

在完成标准化、高效化建设后,满足日常运营需求已不在话下,而我们则将方向转移至技术多元化赋能上,逐步完成多项创新建设,推动业务建设。

半屏互动

依托现行weex技术栈灵活的发版及快读覆盖能力,通过前端、客户端、播放器等多方共同努力,借助OTT酷喵APP自身硬件特性及用户使用习惯,开创性的完成“半屏互动”建设。该能力建设既满足了用户线运营“大量级曝光”的诉求,也满足会员线运营“精准投放、提高渗透”的诉求。根据数据结果来看非常成功,尤其在曝光UV量级上,实现端内投放曝光UV提升约200%的惊人数据。

image.png

同步登录态

OTT从开发语言、操作理念等都遵循手机APP相关规范,不同之处在于手机APP为触屏操作,OTT一般为遥控器操作;OTT端的最常见登录,与常见的PC端扫码登录一致,由OTT端展示登录二维码,手机端扫码操作确认登录,即“扫码登录”;我们希望将OTT端登录态同步至手机端,由手机端完成相应操作,同时避免手机端无登录态、登录账号不统一等带来业务操作上的偏差,即“扫码反登”。

image.png

质量监控

长期以来,TV端投放页面,存在用户投诉-bug定位困难的情况,客服及技术线同学难以获取用户相应错误数据;使用客户端隐藏debug又存在操作繁琐,沟通困难情况。经过调研后,APP端质量平台能力与OTT端该诉求吻合,因此集合Rax开发方、质量平台、Rax容器方三方共建,完善OTT端质量平台,即实时日志监控。

image.png

前端可视化搭建收单

OTT酷喵会员线-“收单能力”升级已经取得一定成果,借助同步登录态、单商品收银台等前端创新能力的落地,直接推动了OTT端登录率近10%提升,并简化购买链路,实现可视化搭建,“一步扫码付费”,该组合能力领先业内。另外,OTT半屏收银台的开发上线,使OTT酷喵用户触达能力迎来重大升级,依托播放页,实现一步扫码付费,较大程度简化付费链路,提高了转化率。

image.png

积分商城

OTT积分商城是围绕积分的发放与兑换,建立符合大屏端运营特点的用户管理体系,用户通过多种行为获取积分,再通过不同玩法或商品兑换消耗积分,从而为用户增长、用户活跃与留存提供有效抓手。
积分商城二期功能已全部完成,支持积分的有序发放,酷喵自身权益、(阿里生态)二三方虚拟权益与电视淘宝权益的兑换,为OTT用户运营的基础能力打下了基础。之后,与电视淘宝打通,完成账号绑定、加购、下单、付费等能力建设,后续将实现双方资源互补。

以上就是优酷OTT大屏的前端建设之路,希望能够为大家带来启发。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

带你了解阿里文娱技术

官方博客
官网链接