不一样的烟火:记OTT端半屏互动能力建设 | 《优酷OTT互联网大屏前端技术实践》第六章-阿里云开发者社区

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

不一样的烟火:记OTT端半屏互动能力建设 | 《优酷OTT互联网大屏前端技术实践》第六章

简介: 如何建设OTT播放页,问题如下: OTT播放页将如何承载投放? 互动及交互方式是怎样? 容错机制如何处理? 定向投放如何实现? 用户观影体验如何保障? 共建开发如何分工? ……

上一章:我在优酷OTT端做自动化制图 | 《优酷OTT互联网大屏前端技术实践》第五章>>>

下一章:OTT端性能优化建设之本地缓存设计 | 《优酷OTT互联网大屏前端技术实践》第七章>>>

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

test

作者| 阿里巴巴文娱技术 魏家鲁

一、背景

酷喵APP,一方面拥有巨大的DAU量级,一方面受限于种种原因,营销投放渗透率还有很大提升空间。在技术上如何寻求某些突破口,实现端内投放渗透提升?

经过多方讨论,我们将注意点放在了酷喵APP“播放页”上。作为视频服务APP,依托千万级的强劲日活人群支持,“视频播放页”达到PV上亿规模,在端内PV量级排名中无可争议的第一。

如何建设OTT播放页,问题如下:
OTT播放页将如何承载投放?
互动及交互方式是怎样?
容错机制如何处理?
定向投放如何实现?
用户观影体验如何保障?
共建开发如何分工?
……

二、横向调研

相比较而言,手机APP端、PC端、OTT端在播放页中,均有相应营销投放,在“播放器区”均建设有“互动投放”,经情况了解及数据检测,我们发现播放器区投放渗透效果远远优于其它区域坑位。我们判断,如果OTT端新开辟播放器区投放能力,将在相当大程度上提升投放渗透率。

下面我们对手机APP端、PC端、OTT端播放器区投放,进行简单介绍。

1、PC端

image.png

PC端在播放页-播放器中,策略投放主要是“付费引导”,如图所示,PC播放器经过UPS鉴权,获取该用户之于该视频的权益数据,根据数据情况确定是否露出引导文案及链接,点击交互链接拉起“PC弹框收银台”。

2、手机APP端

image.png

手机APP端与PC端类似,也是在不影响用户观看体验情况下,经过鉴权,判断是否露出付费引导按钮。不同的是,无论全屏还是小窗播放情况下,手机APP端在用户点击付费引导按钮后,都是拉起半屏Native收银台(右侧图),此时,仍然不影响用户观看视频。

3、OTT端

image.png

与PC端和手机APP端一致,均为在不影响用户观看体验情况下,经过鉴权,判断是否露出付费引导按钮。而用户遥控器OK键,则新打开收银台页面,此时视频观看被阻断。

4、总结

我们对比了PC端、手机APP端、OTT端播放器区运营投放能力:

image.png

经过调研发现,PC端、手机APP端、OTT端播放页-播放器区互动投放大致特点:

1) 播放器区互动投放,基本不影响用户观感体验(OTT端除外);
2) 播放器区互动投放分两步,先露出引导内容,经由用户操作,展示完整投放内容;
3) 用户可通过操作,将该区域投放关闭,恢复初始状态(OTT端除外);
4) 具备特定维度定投能力(圈人设定售卖商品);
5) 目前三端投放能力主要为付费引导/收单;

纵观看来,PC端、手机APP端、OTT端的播放页 “投放”更像是一种“配套能力”,紧紧围绕视频付费引导展开,并未涉及活动投放,且形式固化:通过权益判别,实现在站/端内每一个需付费视频(相对用户权益),精准付费引导。而在OTT端我们更希望的是同时具备“付费引导/收单”和“活动投放”两种能力。因此,在OTT端播放互动建设规划中,势必与先行思路有所区别。

三、建设方案

1、方案维度

OTT端最终确定OTT播放页半屏互动以“设备硬件/APP版本/账号权益状态”综合维度进行付费引导投放和活动投放,投放内容本身独立于播放页/播放器。实现多种维度,批量定投收单以及活动投放。

2、交互方案

经过多方沟通,我们逐渐梳理出一条OTT端播放页-播放器区营销投放交互方案。即在OTT播放页-全屏播放状态下,通过定向投放,在特定播放时间点位,露出“引导卡片图”,用户遥控器OK键后,由右侧拉出半屏页面,在该半屏页面完成既定营销交互,我们称之为“OTT半屏互动”。交互图如下:

image.png

3、技术支持方案

目前在OTT端酷喵APP开发过程中中,存在3种技术栈,即原生Native、weex、H5。原生Native作为酷喵APP主要开发项;weex一方面作为坑位投放页面开发技术栈,一方面作为能力补充,补位Native开发;H5为早期投放页面开发技术栈,本财年已逐步被weex取代。

image.png

综合评比,我们得出方案3为最优方案,后续的共建分工及实现逻辑也相应浮出水面。

4、共建分工

交互设计与技术支持方案已经确定,接下来梳理业务开发链路,并进行拆解,链路逻辑图如下:

image.png

按照上方链路逻辑图,多方共建分工已然明确,本次共建涉及:

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实例销毁,将业务错误规避于未展示阶段:

image.png

2)前端紧急开关

考虑到播放页作为酷喵APP最核心页面之一,且PV量级巨大,OTT投放平台配置有状态开关。此外,为保证开关状态实时性,在前端层面增设紧急开关逻辑,以应对突发故障,双重保险。

image.png

在CMS及前端MT平台,两道开关保险,确保半屏互动投放,在故障发生时,迅速止血,且实现用户无感知,不影响用户体验。

五、场景建设

在半屏互动能力支持下,前端线完成两大场景建设,即:半屏收银台、半屏活动投放。

1、半屏收银台

在最初,OTT端仅有Native收银台,后续借助《OTT 端登录态设备穿透:扫码登录与反登录》一文中介绍的同步登录态能力,在前端开发完成weex版“单商品收银台”,并将该收银台组件化,实现可视化搭建。

在后续的“OTT半屏收银台”建设过程中,复用“单商品收银台”能力,完成与半屏互动能力的结合,“OTT半屏收银台”就此诞生。

区别于手机APP端半屏收银台,OTT端半屏收银台为独立于播放页/播放器业务,以“设备硬件/APP版本/账号权益状态”多维度进行付费引导查询,实现多种维度、批量定投收单,描述为:

特定硬件类型、特定APP版本、特定会员情况、指定会员商品、指定视频内容播放中曝光。

image.png

如上图,OTT酷喵APP在完成该半屏能力建设后,端内三种收银台能力形成:Native综合收银台、weex单商品收银台、weex半屏收银台:

image.png

2、半屏活动投放

前文提到,OTT端播放页半屏互动投放为独立存在,并非集成式,且具备多维度定投能力,站在运营同学角度来,半屏互动投放无异于一个新的、高曝光量级的“定投坑位”。

与“半屏收银台”相比,“半屏活动页”偏向于业务开发,不再拘泥于商品、付费、收单的固定范畴,而是面向于个性化的业务诉求,因此在开发阶段也更加多样化。例如下图:双11预约猫晚。

image.png

六、总结

借助OTT酷喵APP自身硬件特性及用户使用习惯,创新完成“半屏互动”建设,该能力既满足用户线运营“大量级曝光”的诉求,满足会员线运营“精准投放、提高渗透”的诉求。根据数据结果,在曝光UV量级上,实现端内投放曝光UV提升200%。

半屏互动能力已经具备,也经受住了实际考验,作为技术开发人员,除了考虑业务支撑外,还需要考虑开发效能提升。因前端半屏业务相对常规业务而言,开发与调试都更加复杂。在之前的前端半屏业务开发过程中,尤其在拉取配置数据、抢取焦点等环节存在诸多“弯弯绕”,调试/测试过程也不同于常规项目,且新手上手开发成本较高。

在上述痛点之下,寻求突破势在必行,在经过多轮方案验证,最终敲定并完成两种优化建设:

1、半屏可视化搭建

前端开发一套“半屏可视化搭建套件”,集成于阿里文娱的可视化搭建平台,套件内置播放中调用监听、抢取焦点、获取配置、实时监控、紧急开关等逻辑。由运营同学在平台直接可视化搭建发布,应对常规半屏业务,无需开发介入;

2、半屏投放-能力模板

主要应对高复杂度/个性化业务,能力模板完成播放中调用、抢取焦点等逻辑,具体业务实现由业务方<如电淘>自行开发。双方逻辑解耦,降低开发难度与时间成本,提高半屏业务投放稳定性。

该两种能力优化,本文不再展开介绍,将在后续文章中详细解读。

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

分享:

带你了解阿里文娱技术

官方博客
官网链接