上一章：我在优酷OTT端做自动化制图 | 《优酷OTT互联网大屏前端技术实践》第五章>>>
下一章：OTT端性能优化建设之本地缓存设计 | 《优酷OTT互联网大屏前端技术实践》第七章>>>
作者| 阿里巴巴文娱技术 魏家鲁
一、背景
酷喵APP，一方面拥有巨大的DAU量级，一方面受限于种种原因，营销投放渗透率还有很大提升空间。在技术上如何寻求某些突破口，实现端内投放渗透提升？
经过多方讨论，我们将注意点放在了酷喵APP“播放页”上。作为视频服务APP，依托千万级的强劲日活人群支持，“视频播放页”达到PV上亿规模，在端内PV量级排名中无可争议的第一。
如何建设OTT播放页，问题如下：
OTT播放页将如何承载投放？
互动及交互方式是怎样？
容错机制如何处理？
定向投放如何实现？
用户观影体验如何保障？
共建开发如何分工？
……
二、横向调研
相比较而言，手机APP端、PC端、OTT端在播放页中，均有相应营销投放，在“播放器区”均建设有“互动投放”，经情况了解及数据检测，我们发现播放器区投放渗透效果远远优于其它区域坑位。我们判断，如果OTT端新开辟播放器区投放能力，将在相当大程度上提升投放渗透率。
下面我们对手机APP端、PC端、OTT端播放器区投放，进行简单介绍。
1、PC端
PC端在播放页-播放器中，策略投放主要是“付费引导”，如图所示，PC播放器经过UPS鉴权，获取该用户之于该视频的权益数据，根据数据情况确定是否露出引导文案及链接，点击交互链接拉起“PC弹框收银台”。
2、手机APP端
手机APP端与PC端类似，也是在不影响用户观看体验情况下，经过鉴权，判断是否露出付费引导按钮。不同的是，无论全屏还是小窗播放情况下，手机APP端在用户点击付费引导按钮后，都是拉起半屏Native收银台(右侧图)，此时，仍然不影响用户观看视频。
3、OTT端
与PC端和手机APP端一致，均为在不影响用户观看体验情况下，经过鉴权，判断是否露出付费引导按钮。而用户遥控器OK键，则新打开收银台页面，此时视频观看被阻断。
4、总结
我们对比了PC端、手机APP端、OTT端播放器区运营投放能力：
经过调研发现，PC端、手机APP端、OTT端播放页-播放器区互动投放大致特点：
1) 播放器区互动投放，基本不影响用户观感体验(OTT端除外)；
2) 播放器区互动投放分两步，先露出引导内容，经由用户操作，展示完整投放内容；
3) 用户可通过操作，将该区域投放关闭，恢复初始状态(OTT端除外)；
4) 具备特定维度定投能力（圈人设定售卖商品）；
5) 目前三端投放能力主要为付费引导/收单；
纵观看来，PC端、手机APP端、OTT端的播放页 “投放”更像是一种“配套能力”，紧紧围绕视频付费引导展开，并未涉及活动投放，且形式固化：通过权益判别，实现在站/端内每一个需付费视频(相对用户权益)，精准付费引导。而在OTT端我们更希望的是同时具备“付费引导/收单”和“活动投放”两种能力。因此，在OTT端播放互动建设规划中，势必与先行思路有所区别。
三、建设方案
1、方案维度
OTT端最终确定OTT播放页半屏互动以“设备硬件/APP版本/账号权益状态”综合维度进行付费引导投放和活动投放，投放内容本身独立于播放页/播放器。实现多种维度，批量定投收单以及活动投放。
2、交互方案
经过多方沟通，我们逐渐梳理出一条OTT端播放页-播放器区营销投放交互方案。即在OTT播放页-全屏播放状态下，通过定向投放，在特定播放时间点位，露出“引导卡片图”，用户遥控器OK键后，由右侧拉出半屏页面，在该半屏页面完成既定营销交互，我们称之为“OTT半屏互动”。交互图如下：
3、技术支持方案
目前在OTT端酷喵APP开发过程中中，存在3种技术栈，即原生Native、weex、H5。原生Native作为酷喵APP主要开发项；weex一方面作为坑位投放页面开发技术栈，一方面作为能力补充，补位Native开发；H5为早期投放页面开发技术栈，本财年已逐步被weex取代。
综合评比，我们得出方案3为最优方案，后续的共建分工及实现逻辑也相应浮出水面。
4、共建分工
交互设计与技术支持方案已经确定，接下来梳理业务开发链路，并进行拆解，链路逻辑图如下：
按照上方链路逻辑图，多方共建分工已然明确，本次共建涉及：
1) Native方 - OTT weex容器、播放页/播放器能力支持；
2) CMS方 - OTT投放CMS能力支持
3) 后端 - 接口支持
4) 前端 - 交互调度/weex开发
四、体验保障
1、观感保障
虽然OTT全屏播放，播放画面尺寸较大，但半屏互动页由屏幕右侧拉出，势必会遮住部分播放画面，影响用户观看体验；此外，OTT页面操作，涉及“焦点切换”(OTT端页面有且最多只有一个焦点选中)。这两点需要寻求突破点解决，经过与播放页面/播放器同学沟通，得到一个相对完美的解决方案，即：
1) 半屏互动定投，“引导卡片”在特定时间点位露出(本质为weex页面)，此时由于该卡片尺寸较小，读用户观感体验营销较小，不做处理；
2) weex页面高层级浮在播放器之上，为保证用户遥控器交互，weex页面通过Native api，执行抢夺页面焦点逻辑；
3) 用户遥控器点击“OK键”，半屏页(开发/设计约定宽600px)由屏幕右侧拉出，在该节点，前端weex层调用Native bridge方法，通知播放器，收缩播放器尺寸；
4) 随后用户遥控器“back键”，则weex层立即通知播放器回复全尺寸，之后weex页面自行执行页面实例销毁，页面焦点重新回归播放器；
2、前端容错
前端作为最下游展示业务，直接面向观影用户，上游任意一环节出现故障，都可能导致前端业务出错，为保证该环节健壮性，增强前端容错势在必行。在weex容器与前端共建过程中，根据架构设计，前端在两个方面进行了容错处理：
1）静默运行-错误防控
上文“共建分工”链路图中，在命中定投且到达时间点位后，weex容器被拉起，且为静默运行，并未展示在界面中。此时前端weex半屏页被打开，在实例化weex页面过程中，前端逻辑需要通过Native api方法获取半屏配置信息、查看屏幕播放状态等操作，此阶段，一经出现业务错误，则前端weex逻辑终止实例化，并执行weex实例销毁，将业务错误规避于未展示阶段：
2）前端紧急开关
考虑到播放页作为酷喵APP最核心页面之一，且PV量级巨大，OTT投放平台配置有状态开关。此外，为保证开关状态实时性，在前端层面增设紧急开关逻辑，以应对突发故障，双重保险。
在CMS及前端MT平台，两道开关保险，确保半屏互动投放，在故障发生时，迅速止血，且实现用户无感知，不影响用户体验。
五、场景建设
在半屏互动能力支持下，前端线完成两大场景建设，即：半屏收银台、半屏活动投放。
1、半屏收银台
在最初，OTT端仅有Native收银台，后续借助《OTT 端登录态设备穿透：扫码登录与反登录》一文中介绍的同步登录态能力，在前端开发完成weex版“单商品收银台”，并将该收银台组件化，实现可视化搭建。
在后续的“OTT半屏收银台”建设过程中，复用“单商品收银台”能力，完成与半屏互动能力的结合，“OTT半屏收银台”就此诞生。
区别于手机APP端半屏收银台，OTT端半屏收银台为独立于播放页/播放器业务，以“设备硬件/APP版本/账号权益状态”多维度进行付费引导查询，实现多种维度、批量定投收单，描述为：
特定硬件类型、特定APP版本、特定会员情况、指定会员商品、指定视频内容播放中曝光。
如上图，OTT酷喵APP在完成该半屏能力建设后，端内三种收银台能力形成：Native综合收银台、weex单商品收银台、weex半屏收银台：
2、半屏活动投放
前文提到，OTT端播放页半屏互动投放为独立存在，并非集成式，且具备多维度定投能力，站在运营同学角度来，半屏互动投放无异于一个新的、高曝光量级的“定投坑位”。
与“半屏收银台”相比，“半屏活动页”偏向于业务开发，不再拘泥于商品、付费、收单的固定范畴，而是面向于个性化的业务诉求，因此在开发阶段也更加多样化。例如下图：双11预约猫晚。
六、总结
借助OTT酷喵APP自身硬件特性及用户使用习惯，创新完成“半屏互动”建设，该能力既满足用户线运营“大量级曝光”的诉求，满足会员线运营“精准投放、提高渗透”的诉求。根据数据结果，在曝光UV量级上，实现端内投放曝光UV提升200%。
半屏互动能力已经具备，也经受住了实际考验，作为技术开发人员，除了考虑业务支撑外，还需要考虑开发效能提升。因前端半屏业务相对常规业务而言，开发与调试都更加复杂。在之前的前端半屏业务开发过程中，尤其在拉取配置数据、抢取焦点等环节存在诸多“弯弯绕”，调试/测试过程也不同于常规项目，且新手上手开发成本较高。
在上述痛点之下，寻求突破势在必行，在经过多轮方案验证，最终敲定并完成两种优化建设：
1、半屏可视化搭建
前端开发一套“半屏可视化搭建套件”，集成于阿里文娱的可视化搭建平台，套件内置播放中调用监听、抢取焦点、获取配置、实时监控、紧急开关等逻辑。由运营同学在平台直接可视化搭建发布，应对常规半屏业务，无需开发介入；
2、半屏投放-能力模板
主要应对高复杂度/个性化业务，能力模板完成播放中调用、抢取焦点等逻辑，具体业务实现由业务方<如电淘>自行开发。双方逻辑解耦，降低开发难度与时间成本，提高半屏业务投放稳定性。
该两种能力优化，本文不再展开介绍，将在后续文章中详细解读。