A high-stability video player development plan for hundreds of millions of users | 618 Amoy front-end technology sharing

A high-stability video player development plan for hundreds of millions of users | 618 Amoy front-end technology sharing

Author | Leaf Sequence

Produced | Amoy front-end team


The excellent performance of the PHA framework has enabled a large number of businesses and conference venues to gradually switch to H5, but at the same time it has brought some challenges. Taking multimedia daily short video/live broadcast services as an example, the stability, performance, and playback capability support of H5 native players are difficult to meet the usage standards. There is no H5 player available for services in the H5 environment. At this time, a player that can play smoothly on H5 is needed.

First of all, experience the player capabilities of H5 during the 618 period in advance: The
results of the 618 period: the main venue of the 618, guess you like it, live the venue, gather cost-effective tens of billions of subsidies, industry venues, etc.

Same-layer rendering player scheme design

Maybe you didn't understand what is the same layer rendering before?
Same-layer rendering is a technology that allows Native components and WebView DOM elements to be mixed together for rendering. It can ensure that Native components and DOM elements have the same body feel, and there is almost no difference in rendering levels, scrolling feelings, and touch events. For more information, check out Hybrid's new evolution of WindVane same-layer rendering .

Considering performance, stability, ease of use, and flexibility, we chose the same-layer rendering technology solution to render the mobile player under H5.

The underlying Native player has a set of sound playback capabilities, and it performed well in the early days of weex and Native. After years of precipitation, with sound APIs and good performance stability, the capabilities of the Naitive player have reached the standard for business use.
On this basis, the need for Native player to do the same layer as a layer encapsulation processing to be suitable for rendering the component (iOS wkwebview, android UC core) layer with the renderer player webview. The client package component layer needs to listen to the same layer rendering event notification, and instantiate/destroy the player when it receives the create/destroy message.
The monitoring depends on the middle
communication layer
, and the Tao system infrastructure team monitors the components rendered at the same layer: when a node is created by the rendering component at the same layer, the client player is notified to instantiate the rendering.
The business layer player encapsulation uses the @ali/rax-composite-view-factory same-layer component rendering factory method. The library renders the components into nodes. When the nodes are rendered, the front end will notify the monitoring layer which components need to be rendered At this time, the listening layer notifies the client component after receiving it, the client finishes rendering, and continues to receive event listeners from the front end. (iOS communicates through element.addEventListener, and Android communicates through WindVane).


From a business perspective, video playback is mainly divided into two types: live broadcast and on-demand .
Among them, the live broadcast is divided into: live streaming, playback, watching points, and on-demand is the form of video playback.
As can be seen from the figure, for such a complicated playback requirement, before this, only players for complex services under weex and web were supported. In the PHA (ie, H5) scenario, there is no suitable player.

Video component support before 618:

Videoplus is a component for multi-scene players in the terminal. This component smoothes out players in different scenes. For users, they don t need to pay attention to the current scene, but only the player. Just by itself.

  • Smoothing of playback scenes : Videoplus has done a layer of smoothing for the environment, and different players are used for different scenes. This time, 618 adds a new rendering player of the same layer, which is more complete in capability.
    • weex: a player that uses the underlying package of weex
    • Hand Amoy H5: Play with the same layer rendering player
    • External web: use the multimedia front-end team videox.js
  • Events/attributes/monitoring : Videoplus smoothes the player s time, attributes, and monitoring, and conforms to the w3c standard player s api standard. When users use it, if they have started video development, the access cost will be greatly reduced.


Splayer is not a real player in the strict sense, but a business-based encapsulation layer component on Videoplus. Splayer does not do special processing for the functions of the player itself, but focuses on some practical functions that are more concerned in the daily business development of the player.
Before Splayer control, the business background was very complicated:

  • List form
    • Single stream
    • Dual stream
  • Carousel form
  • Tab form
  • Header mode

To support such complex and diverse interactive scenes, Splayer must have various capabilities, and the logic for event monitoring and distribution processing is very complicated.
Colleagues, you need to consider the stability of the client's performance as a whole, and keep the player singleton control. then:

  • Instance control :

    • Splayer can always ensure that the current player has only one player instance, avoiding OOM due to unlimited growth of the instance.
    • For pages similar to the form of meeting venue modules, Splayer requires that the versions referenced by each module are consistent. The instantiated SplayerEmitter guarantees uniqueness and can monitor commands sent by other modules.
  • Event monitoring : Splayer provides a series of event monitoring solutions to control the video player. You can use the SplayerEmitter provided by Splayer to complete the destruction or creation of the player, and you don t need to worry about the processing of the rest of the player. Other player instances will be managed at the same time).

    • Scroll monitoring: When scrolling stops, Splayer will find the best position of the player to play.
    • Specified id playback monitoring: In a player list scenario, specify a single player to monitor playback. At this time, VideoManager will destroy the rest of the players and instantiate the player with the specified id.
    • Appear/DisAppear monitoring: Relying on the appear/disappear method of rax, at each Splayer Appear, VideoManager will cache the current player, and select the best position (center) from the currently cached Appear player queue to start playing.


Stability Guarantee Scheme

Videoplus provides multi-dimensional downgrade capabilities, and configures downgrade schemes through manual Tao mt. During the big promotion period, report in advance on the plan platform.

ultimate solution for full downgrade , after opening, all Videoplus players are forced to downgrade to poster.

The player scene degradation scheme (H5/weex/PHA)
supports H5/weex/PHA scenes, and should be used in emergency when the player encounters unexpected situations in the corresponding scene (live or on-demand).
The H5/weex/PHA scenes have:

  • Disable live streaming
  • Disable video

The designated service degradation plan is
used when a problem occurs when a certain service uses the player. When the development service is connected to the player, it is necessary to pass in the unique service designated bizFrom, which needs to be applied to the player manager. If the value is not passed in, the player cannot be used.
You can directly specify a business** (bizFrom) to close the playback function. Once closed, live broadcast and video cannot be used in this business scenario . **

Specify the client/client version number to use the
specified client version and version number. In the mobile version and Tmall client version, if the player is found to have some bugs, it can be downgraded through this switch.
The granularity is controlled to a three-digit version number, such as the manual Taobao version 9.5.0.

Specify the operating system version number. In
this scenario, due to problems with players under certain operating systems and versions, the granularity is controlled to a three-digit version number, such as iOS 10.1.3.

Big promotion of technical and business performance

After years of accumulation of the native player core of the Amoy Technology Department, the native bottom player is in a stable state. Compared with H5 players, Native players support a wider range of formats, better decoding capabilities, and excellent performance experience, but they lack flexibility. The same-layer rendering player based on the Native player achieves the same level of experience as the Native player, and at the same time, it has both flexibility and abilities.

H5 player vs same-layer rendering player


618 Battle Results

Business data: 6 or more 618 modules (industry, live broadcast 1x2, guess you like, head picture, etc.) access, serving more than 200 venues.
Technical performance: The
success rate of sls large disk monitoring bottom player is more than 99%
; the client monitoring is stable and no crash is added , no failure , no rollback and degradation , and the overall gray level is smooth .

Problems encountered by the same layer rendering player

Problem: After the front end is removed, the PHA Tab switch hangs the webview, which causes the asynchronous operation to fail and the player instance is not destroyed. The main venue header/Guess your favorite module, industry product module, live venue 1x2 module.
Solution: The player monitors the PHA page disappear, forcibly stops the playback, and destroys the player synchronously with forceUpdate to solve this problem. The

problem is solved by the complicated use of Splayer. When the video switching of the 1x2 module player is too fast, the disappearing animation delays and the cover image shifts. A white window appears due to the wrong timing.
Solution: Adjust the timing of removing the cover art of the bottom player and remove it before playing.

future plan

For this 618 experiment and application, the same layer rendering player is just a small test. This big promotion of the ability to render players on the same layer has given the business a taste of sweetness. Combined with the popularity of live streaming this year, a large number of subsequent mobile shopping businesses will more actively embrace the ability of PHA to use the same layer to render players. For us, how Grasping the trend to vigorously develop the player and take the lead in the business, driving business development is the main goal.
The same-layer rendering player will continue to develop in the future to improve the playback experience and live broadcast interactive capabilities:
1. Lower the access standard, cover the full environment, and access the service at zero cost;
2. Create an in-end experience to benchmark the H5 of the client's live broadcast room The live broadcast room responds to rapid business iterations;
3. Improve the player experience of the venue and bring more GMV conversions;
4. Create interactive live games in the future;
use the same-layer rendering player as a hook, and improve technical capabilities to drive business capabilities upgrades. Full-scale development of multimedia services has blossomed.

about Us

We are the multimedia front-end team of Taobao. We are mainly responsible for multimedia services such as Taobao live broadcast and short video. We continue to research and develop low-latency push-pull streaming, non-linear video editing, players, media intelligence, streaming media interaction, and multimedia opening. Practice, focus on the research of audio and video Web technology, and strive to build the top multimedia front-end technical team in China.
If you are interested in our team, please write to joven.panj@alibaba-inc.com

Scan WeChat to follow the front-end team of Tao Department