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

Introduction to Today, when everything can be video-enabled, short video content, as a new promotion point for mobile products, has received more and more attention and investment. At the same time, short videos also increase user stickiness and increase user stay time. A sharp weapon. So how to quickly realize the mobile terminal short video function? In the first two articles, we introduced the optimization of Hema short video second-broadcasting (iOS/Android). In this article, we will talk about second-broadcasting, and another ability to increase the short video user experience from the somatosensory-rebroadcast.

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 smoothly transition and continue playing 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.

**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.

◆ video streams

To solve the multiplexing of streams, 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 1614854a21011b "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. The advantages of player View cross-page delivery: simple ideas and 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. Advantages of global player management based on the Surface (View) level: good experience, expandable memory control, and 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, expandable memory management and control, fast implementation (reusable and expandable Taobao player's underlying token mechanism) Disadvantages: need a certain transformation, experience is better than solutions 1, 2 Slightly worse (the sound has a momentary frustration, not obvious)

finally chose option 3, here the principles of option 2 and 3 1614854a210277 are the same, there is no obvious difference between advantages and disadvantages, finally chose option 3 because it is currently the most stable and lowest cost method. , multiplexing, and management 1614854a210279 is also applicable to solution 2.

Player resume, multiplex and manage

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).

◆ Decoupling the player View and MediaPlayer layer

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

◆ 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. Global player (MediaPlayer) control can create 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. When the created player resumes playing, but MediaPlayer is occupied by another player created later, unbind MediaPlayer and re-bind the current player.

◆ Scene simulation

Scene 1: APP creates 4 players or less.

Scene 2: When creating more than 4 players.

Scene 3: newly created player token of 1614854a2104bd already exists, reuse MediaPlayer.

Scene 4: When has a token that is the same as the token of the player that is about to be destroyed (or when the MediaPlayer player has been cancelled for playback).

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. Customize the realization of attribute animation

Advantages: Small intrusion, only minimal coordinate information on the front page is required. 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: Need to realize the animation by yourself, there is a certain sense of flicker.

◆ Animation principle

1. The front page jumps to the immersive mode and transfers 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 should be set to opaque at the end here, otherwise the pre-page will not execute onStop (). For details, refer to the next section, 1614854a210624 Life Cycle Filling .)

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, call the convertFromTranslucent method of Activity through reflection to make the activity opaque.

2. When returning to the beginning of the animation, call the convertToTranslucent method of Activity 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 second playback of the general scenes of the player, such as the card video on the homepage list. 2. To 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. Welcome to the "Video Cloud Technology" public account.

---

"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.

Copyright Notice: content of this article is contributed spontaneously by Alibaba Cloud real-name registered users, and the copyright belongs to the original author. The Alibaba Cloud Developer Community does not own its copyright and does not assume corresponding legal responsibilities. For specific rules, please refer to the "Alibaba Cloud Developer Community User Service Agreement" and the "Alibaba Cloud Developer Community Intellectual Property Protection Guidelines". If you find suspected plagiarism in this community, fill in the infringement complaint form to report it. Once verified, the community will immediately delete the suspected infringing content.