「高稳定性」视频播放器养成计划

最新推荐文章于 2025-05-03 10:29:24 发布

2401_84049088

最新推荐文章于 2025-05-03 10:29:24 发布

阅读量616

点赞数 7

分类专栏：程序员文章标签：音视频

本文链接：https://blog.csdn.net/2401_84049088/article/details/137899332

版权

程序员专栏收录该内容

433 篇文章

订阅专栏

本文介绍了淘系技术部如何解决H5环境下多媒体业务的播放器问题，通过同层渲染技术实现Native播放器在Webview中的流畅运行。Videoplus和Splayer组件分别针对直播和复杂业务场景提供统一接口，确保了大促期间的稳定性和用户体验。同时，文章还提到了Java开发者的学习资源分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇的作者是淘系技术部高级前端工程师叶序，为大家介绍亿级用户高稳定性视频播放器养成计划

背景

PHA 框架的优秀性能让大量业务、会场开始逐步转用 H5，但同时带来了一些挑战。以多媒体日常短视频/直播业务为例，H5 原生的播放器的稳定性、性能、播放能力支持均难以达到使用标准，在 H5 环境下没有一个业务可用的 H5 播放器。这时候就需要一个 H5 上能够流畅播放的播放器。

先提前体验一下618期间，H5 下播放器能力：

618 期间战果：618主会场，猜你喜欢，直播会场，聚划算百亿补贴、行业会场。

同层渲染播放器方案设计

‍

也许你之前不了解什么是同层渲染？

同层渲染，是允许将 Native 组件和 WebView DOM 元素混合在一起进行渲染的技术，能够保证 Native 组件和 DOM 元素体感一致，渲染层级、滚动感受、触摸事件等方面几乎没有区别。

综合了性能、稳定性、易用性、灵活性上考虑，我们选择了同层渲染这种技术方案，以此渲染手淘 H5 下播****放器。

底层 Native 播放器 拥有一套健全的播放能力，在早期 weex 及 Native 下，均有不俗表现。经过多年沉淀，api健全、性能稳定性良好，Naitive 播放器能力已达到业务可用的标准。

在此基础上，需要针对 Native 播放器 做一层同层渲染组件的封装处理以适用于 webview（iOS wkwebview，android UC 内核）上播放器的同层渲染。客户端封装组件 层需要监听同层渲染事件通知，在接收到创建/销毁消息时，实例化/销毁播放器。

监听的依赖于中间的 通信层，淘系基础架构团队针对同层渲染的组件做了监听：在同层渲染组件创建节点时，通知到客户端播放器实例化渲染。

业务层播放器封装，使用了 @ali/rax-composite-view-factory 同层组件渲染工厂方法，该库将组件渲染成节点，当节点渲染出来时，前端会通知到监听层需要渲染何种组件，此时监听层收到后通知到客户端组件，客户端完成渲染，并持续接收来自前端的事件监听。(iOS 通过 element.addEventListener 通信，Android 通过 WindVane 通信)。

▐ Videoplus

从业务角度来说，视频播放主要分为两种：直播和点播。

其中，直播中区分：直播流、回放、看点，点播则是视频播放形式。

从图中可以看到，对于如此复杂度的播放要求，在此之前，仅在weex和web端下针对复杂业务的播放器支持。手淘内在PHA(即手淘H5)场景下，没有一个适用的播放器。

618前视频组件支持情况：

Videoplus 是端内针对多场景播放器的一个组件，该组件在对不同场景下的播放器进行了抹平处理，对用户来说，无需关注当前场景，只关注播放器本身即可。

✎ **播放场景抹平：**Videoplus 针对环境做了一层抹平处理，不同场景使用不同的播放器，本次 618 新增同层渲染播放器，能力上更加完善。

weex：使用 weex 底层封装的播放器
手淘 H5：使用同层渲染播放器播放3、外部 web：使用多媒体前端团队 videox.js

**✎ 事件/属性/监听：**Videoplus 针对播放器的时间、属性、监听进行一层抹平，符合 w3c 标准播放器的 api 标准，用户使用时，如果上手过 video 开发，接入成本大大降低。

▐ Splayer

Splayer 严格意义上来说不是一个真正的播放器，是一个业务基于在 Videoplus 上的封装层组件。Splayer 不针对播放器本身功能做特殊处理，把重点放在了业务日常开发播放器中更关注的一些实用功能上。

在 Splayer 管控之前，业务背景十分复杂：

列表形式单列流双列流
轮播形式
Tab 形式
版头模式

支持如此复杂且多样的交互上场景，Splayer 必须兼具各项能力，对于事件监听及分发处理逻辑十分复杂。

同时，需要整体考虑客户端性能稳定性，保持播放器单例管控。于是：

✎ 实例管控：

Splayer 总能保证当前播放器只有一个播放器实例，避免因为实例无限增长导致 OOM。
对于类似会场模块组成形式的页面，Splayer 要求各个模块引用的版本一致，实例化出来的 SplayerEmitter 保证唯一性并能监听到其他模块发送的指令。

**✎ 事件监听：**Splayer 提供了一系列事件监听方案控制视频播放器，可以通过 Splayer 提供出来的 SplayerEmitter 完成播放器的销毁或者创建工作，并且无需担心其余播放器的处理(在每次操作播放器时，Splayer 会同时管理其他播放器实例)。

滚动监听：当滚动停止时，Splayer 会寻找播放器最佳位置播放。
指定 id 播放监听：存在播放器列表场景下，指定单个播放器监听播放，此时 VideoManager 会销毁其余播放器，并将指定 id 的播放器实例化。
Appear/DisAppear 监听：依赖于 rax 的 appear/disappear 方法，在每个 Splayer Appear 时，VideoManager 会缓存当前的播放器，并从当前缓存的 Appear 播放器队列中选择最佳位置(居中)的开始播放。

稳定性保障方案

Videoplus 提供了多维度的降级能力，通过手淘 mt 配置降级方案。在大促期间，在预案平台提前报备。

Videoplus 的播放能力整体系分为以下几个维度：

全量降级终极兜底方案，开启后，所有 Videoplus 播放器强制降级成 poster。
**播放器场景降级方案（H5/weex/PHA）**支持 H5/weex/PHA 场景，对应场景（直播或者点播）播放器出现意想不到的情况时应急采用。H5/weex/PHA场景分别带有：1、禁用直播2、禁用视频
指定bizFrom降级方案在某一业务使用播放器时发生问题时，兜底使用。当开发业务接入播放器时，需要传入唯一业务指定 bizFrom，具体需要到播放器管理者处申请，如果未传入值，则播放器不可使用。可直接指定某项业务(bizFrom)关闭播放功能，一旦关闭，直播和视频在该业务场景下不可使用。
指定客户端/客户端版本号使用指定客户端版本及版本号使用。在手淘及天猫客户端版本中，如果播放器被发现某些bug，可通过此开关降级。粒度控制到三位版本号，例如手淘 10.0.0 版本。
指定操作系统版本号此场景由于某些操作系统及版本下播放器出现问题，粒度控制到三位版本号，例如 iOS 10.0.0 版本。

大促技术和业务表现

淘系技术部 Native 播放器内核的多年沉淀，Native 底层播放器处于稳定状态。相较 H5 播放器来说，Native 播放器支持格式更广、解码能力更优、性能体验极佳，但灵活能力不足。基于 Native 播放器的同层渲染播放器，在体验上与 Native 播放器达到达到持平状态的同时，灵活能力兼具。