How to realize the smooth replay of Android short videos across pages?

Today, where everything can be video, short video content, as a new promotion point for mobile products, has received more and more attention and investment. At the same time, short video is also a powerful tool to increase user stickiness and increase user stay time. So how to quickly realize the mobile terminal short video function? In the first two articles, we introduced the optimization of short video second broadcast (1613ecccfa52f5 iOS / Android ). In this article, we will talk about the second broadcast, and another ability to increase the short video user experience from the somatosensory-continued broadcast .

Author｜Shaoyang

Review｜Taiyi

As an important means of carrying content, short videos are the focus of attracting users. The content and experience of short videos are directly related to whether users are willing to stay for a long time. Therefore, the optimization of the experience is particularly important.

Resume across pages

Cross-page resuming is another ability that can increase the user experience from the somatosensory in addition to the second broadcast. Since some business scenarios need to play the same video content scenes on different pages, and the page switching of these scenes is often continuous, this requires that the playback of short videos is also continuous. Only in this way can there be continuity in the experience, so that when users enter the immersive page, they can go smoothly and continue to play without perception, thereby producing a continuous and uninterrupted feeling.

Before optimization, the experience of Hema's immersive short video playback page is significantly different from that of mainstream short video apps. When jumping to the video immersive page from the card list page, the same video cannot be replayed, which affects the user's viewing and experience. The following mainly introduces the realization process of the cross-page resuming ability and smooth animation switching effect when the Hema short video enters the immersive page from the ordinary display page.

environment

• Phone: Pixel 4
• os：Android 10
• Player: Taobao player

Effect comparison

First, let's take a look at the effect comparison between Hema before and after optimization and mainstream short video apps.
https://www.youku.com/video/XNTgwNDIwOTM1Ng==

https://v.youku.com/v_show/id_XNTgwNDIwOTM1Ng==.html

problem analysis

It can be seen from the comparison that the key to the replay is the multiplexing of the video stream and the page transition animation.

Multiplexing of video streams

To solve the multiplexing of the stream, and at the same time to ensure that it can be played immediately when entering a new page, without sound and picture frustration, here is an based on the previous article 1613ecccfa54e0 "The Secret Hema Xiansheng APP Android Short Video Second Broadcast Optimization Program" , It is necessary to solve the time-consuming video downloading, loading and decoding.

• According to the caching principle mentioned in the "Secret Hema Xiansheng APP Android Short Video Second Broadcast Optimization Scheme", the player can be used to play the same video (note the unified URL, all Hema is converted to H.265) to avoid multiple downloads.
• The time-consuming loading and decoding needs to be solved by player reuse. The realization scheme is involved here, please refer to the selection of the rebroadcast scheme in the next chapter.

Transition animation

The transition animation can significantly improve the fluency of the somatosensory, but various compatibility issues need to be considered in the implementation process.

Resume program selection

In the early stage of optimization, we considered three renewal programs.

1. Player View cross-page delivery
   Advantages: simple ideas, good experience.
   Disadvantages: serious business intrusion, not universal, player business callbacks cannot be isolated, which is not conducive to continued player management and control.
2. Global player management based on Surface (View) level
   Advantages: good experience, expandable memory management and control, low intrusiveness.
   Disadvantages: The implementation is complicated, and the packaging logic of the underlying HMVideoView needs to be rewritten; memory leaks are prone to occur during the transformation, which is difficult to troubleshoot.
3. Global player management based on MediaPlayer level
   Advantages: non-intrusive, can expand memory management and control, realize fast (reusable and expand the underlying token mechanism of Taobao player)
   Disadvantages: some modification is required, and the experience is slightly worse than that of options 1 and 2 (the sound is frustrated for a moment, not obvious)

finally chose option 3, where the principles of option 2 and 3 1613ecccfa56a9 are the same, there is no obvious difference between , and option 3 is finally chosen because it is the most stable and lowest cost method at present. , multiplexing, and management 1613ecccfa56ad is also applicable to plan 2 .

Player replay, multiplexing and management

In terms of business, we need to achieve replay. Through problem analysis, we already know that it can be achieved through the multiplexing of video streams, and the multiplexing of video streams is achieved by multiplexing MediaPlayer here (Surface+MediaPlayer can also be multiplexed).

Decouple the player View and MediaPlayer layers

Disassemble MediaPlayer from TaobaoPlayerView and manage it globally through MediaPlayerManager. After global management, the MediaPlayer of all players is allocated and controlled by MediaPlayerManager.

Relationship between the various components

Business Process

Ensure that in the business process, only need to care about the interaction between the business and VideoView, and the underlying player reuse is implemented by MediaPlayerManager.

Player multiplexing (management) principle

Player reuse is a subset of management, so we will introduce it here. The main original principles are as follows:

1. The global player (MediaPlayer) control creates 4 at most.
2. If there are more than 4 players, when creating the fifth one, destroy the MediaPlayer of the least used player first.
3. Each player is randomly assigned a token (time stamp + random number), or it can be specified by the developer.
4. Players with the same token share MediaPlayer.
5. A MediaPlayer can only be bound and held by one player Surface at the same time.
6. There are players with the same token, and the MediaPlayer instance is retained when the current player is destroyed.
7. The created player resumes playback, but when MediaPlayer is occupied by another player created later, unbind MediaPlayer and re-bind the current player.

Scene simulation

Scene One : APP creates 4 players and within.

Scene 2 : When creating more than 4 players.

Scene 3 : When the newly created player token already exists, reuse MediaPlayer.

Scene 4 : When there is a token that is the same as the token of the player that is about to be destroyed (or when the player that has been released from MediaPlayer is playing).

Logic flow chart

From the summary of the scene, MediaPlayer mainly provides four abilities of reuse, restoration, destruction, and expulsion (creation).

Transition animation

Currently there are two options for transition animation:

1. Android's own element animation
   Advantages: The animation is smooth and smooth, without the need to implement animation logic, it is implemented by the system itself.
   Disadvantages: The intrusion is serious, the Nav layer needs to be rewritten, and there are white screens and black screens under the View reuse scheme.
2. Custom implementation of attribute animation
   Advantages: It is small intrusion, and only requires minimal coordinate information on the front page. If it is a View reuse solution, the front page does not even need to provide coordinate information; it has good compatibility and is suitable for various player reuse scenarios.
   Disadvantages: You need to implement the animation yourself, with a certain sense of flicker.

Animation principle

1. The front page jumps to the immersive mode, and transmits the player coordinate Rect information.
2. The immersive type is transparent by default, and creates a player (multiplexed) based on the Rect coordinate information.
3. Start the animation, enlarge the player View to the correct position, and increase the background opacity.
   (Note: The theme of the immersive page must be set to opaque at the end here, otherwise the onStop () will not be executed on the previous page. For details, please refer to the next section, Fill in the hole in the life cycle.)

ps: The same goes for returning to the animation, the process is just the opposite.

Life cycle filling

There is a pitfall in the principle of attribute animation.

problem description :
Assuming the page is A->B, solution 3 requires page B to be fully transparent during the animation process. When windowIsTranslucent in B's theme is true, the life cycle of A->B process A cannot go to stop (even if the animation of page B ends, page A is completely covered). Therefore, the life cycle of A is not executed as expected, and in some scenarios that require onStop execution, the business cannot be executed normally

B Ativity's style (Note: sample code):

<style name="MyTransparent" parent="xxxx">
 <item name="android:windowFullscreen">false</item>
  <item name="android:windowNoTitle">true</item>
  <item name="android:windowBackground">@android:color/transparent</item>
  <item name="android:colorBackgroundCacheHint">@null</item>
  <item name="android:windowIsTranslucent">true</item>
  <item name="android:background">@android:color/transparent</item>
  <item name="android:windowAnimationStyle">@style/noAnimation</item>
 </style>

solution :

1. At the end of the entering animation, the convertFromTranslucent method of Activity is called through reflection to make the activity opaque.
2. When returning to the beginning of the animation, call Activity's convertToTranslucent method through reflection to make the activity transparent.

Follow-up optimization outlook

There is still much to be done about the optimization of multimedia. In addition to scenes such as resumed broadcasting and immersive second broadcasting, we can also:
**1. Optimize the player’s general scenes in seconds, such as the card video on the homepage list.

2. Control the global instance of the player, control the number of players created, thereby optimizing memory. **

Not optimized:
Operation: Continuously open 30-50 pages and players.
Phenomenon: The memory soars and the phone becomes hot, which affects the normal use of the phone.

Optimized:
Operation: open 1 page and player every second, open 100 consecutively.
Phenomenon: The memory rises normally in a zigzag pattern, and there is no obvious soaring phenomenon, and the software runs normally.

In the next issue, we will continue to share the experience optimization practice of Hema iOS short video replay.

"Video Cloud Technology" Your most noteworthy audio and video technology public account, pushes practical technical articles from the front line of Alibaba Cloud every week, and exchanges and exchanges with first-class engineers in the audio and video field. The official account backstage reply [Technology] You can join the Alibaba Cloud Video Cloud Product Technology Exchange Group, discuss audio and video technologies with industry leaders, and get more industry latest information.