将淘宝直播间融入H5页面的技术探索

正文

请到「今天看啥」查看全文

我们在这两年的各种大促，就是这么做的～ 大促会场中打造一个个 直播特色的沉浸流会场 。

累计会场带来业务上在不同指标上的增量。

当然达成业务目标不是一蹴而就的，聚焦于用户体验和业务能力上，我们主要做了几件事：

1. 播放器统一 ：基于直播间端播放器，共建直播 H5 同层渲染播放器，实现 H5 与直播间底层播放器统一。

2. 沉浸式的直播体验 ：实现直播间播放器实例复用，直播间秒开。

3. 直播间实时通信能力 ：H5 页面播放器 实时透出 直播间评论，权益交互等信息。

上述一句话总结： 前端交付页面用户体验逼近 Native，且赋予直播容器业务能力。 下面会具体讲讲，我们是如何做到用户体验和业务能力的技术建设。

基础建设

▐ 直播同层渲染

为何要共建直播同层渲染？在建设初期有两个核心原因：

1. 直播业务诉求：实时直播氛围&权益&实时获取直播间容器详细信息；沉浸式的直播播放体验；

• 基于底层消息通信能力，支持 H5 独立页面实时获取 直播间动态信息 ，扩展直播业务能力。（如评论、购买、观看人数、点赞人数等）

• H5 页面与直播间播放器 实例可复用 ，H5 页面与直播间沉浸式交互体验。保障体验转场/直播流首帧 秒开 & 播放成功率 。

2. 技术生态：直播终端技术融合，直播前端与客户端团队更紧密的技术建设，更敏捷业务迭代效率，提供丰富的直播终端技术生态。

基于技术调研以及上述原因，开始跟直播客户端同学共同自建了 底层直播同层渲染 ，提供播放直播流能力。

1. 要建设直播播放器，首先要理解什么是前端的同层渲染

2. 结合直播客户端的直播间开放架构设计，基于直播播放卡片双端的建设。

3. 前端通过客户端同层渲染组件，从零到一建设直播同层渲染。

1、H5 同层渲染组件是什么？

可以让 H5 页面使用客户端的能力

将 Native 原生组件嵌入到 H5 元素中，并且与 H5 页面非 Native原生组件在同一渲染层级。

2、如何从创建同层渲染组件到 H5 页面播放直播流

生命周期原理

• 创建同层渲染组件 => 客户端 API 一层设置监听标签元素 => 客户端通信创建 DOM createEle => H5 页面同层渲染组件初始化成功等待回调；

请到「今天看啥」查看全文