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

Author | Shaoyang Proofread | Tai Yi

As an important way of carrying content, short video is the key to attract users. The content and experience of short video are directly related to whether users are willing to stay for a long time. Therefore, the optimization of experience is very important.

Continued across pages

Cross-page continuation is another feature that adds to the user experience in terms of motion in addition to second playback. Some business scenarios need to play scenes with the same video content on different pages, and the page switching of these scenarios is often continuous, which requires that short videos be played continuously. Only in this way can the experience be consistent, so that when users enter the immersive page, they can smoothly transition and continue to play without perception, so as to produce continuous and uninterrupted feelings.

Before optimization, there was a significant gap between the experience of hema’s immersive short video playing page and that of mainstream short video apps. When a user switches from the card list page to the video immersion page, the same video cannot be continued, affecting user viewing and experience. The following mainly introduces the realization process of cross-page continuation ability and smooth animation switching effect of Hema short video when it enters the immersive page from the ordinary display page.

The environment

  • Phone: Pixel 4
  • OS: Android 10
  • Player: Taobao player

Effect of contrast

First of all, let’s take a look at the effect comparison between Hema and mainstream short video App before and after optimization

V.youku.com/v_show/id_X…

Problem analysis

It can be seen from the comparison that the key of continuous broadcast lies in the reuse of video stream and page transition animation.

Multiplexing of video streams

In order to solve the reuse of the stream, and ensure that the new page can be immediately played, without sound and picture pause, according to the analysis of the last article “Revealing the Hema Xiansheng APP Android Short Video second broadcast Optimization scheme”, it is necessary to solve the video download, loading and decoding time.

  • According to the caching principle mentioned in “Revealing the Second Broadcast Optimization Scheme of Hema’s APP Android Short Video”, the player can play the same video (pay attention to the unified URL, and hema is changed to H.265) to avoid multiple downloads.
  • Loading decoding time needs to be player reuse to solve. The realization scheme is involved here, which can be referred to the selection of continued broadcast scheme in the next chapter.

Animated transitions

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

Selection of continuation program

In the early stage of optimization, we considered three kinds of continuous seeding schemes.

  1. Player Views are passed across pages

Advantages: simple ideas, good experience effect. Disadvantages: Serious service intrusion, not universal, player service callback cannot be isolated, not conducive to the management and control of continuous player.

  1. Global player management based on Surface (View) level

Advantages: Good experience effect, can expand memory control, low intrusion. Disadvantages: complex implementation, need to rewrite the underlying HMVideoView encapsulation logic; The transformation is prone to memory leakage, which is difficult to troubleshoot.

  1. Global player management based on MediaPlayer level

Advantages: no intrusion, can expand the memory control, fast implementation (reusable and expand the token mechanism at the bottom of Taobao player) Disadvantages: some transformation is needed, and the experience is slightly worse than plan 1 and 2 (there is a momentary pause in the sound, not obvious)

Hema finally chooses Plan 3, where the principle of Plan 2 and Plan 3 is the same without obvious advantages and disadvantages. Plan 3 is finally chosen because it is the method with the highest stability and lowest cost at present. The subsequent analysis of playback, reuse and management of the player also applies to scheme 2.

Player playback, reuse and management

In business, we need to realize the continuation of the broadcast, through the analysis of the problem, we have known that the multiplexing of video stream can be achieved, and the multiplexing of video stream here by multiplexing MediaPlayer (can also be multiplexed Surface+MediaPlayer).

Decouple the player View from the MediaPlayer layer

Unpack MediaPlayer from TaobaoPlayerView and manage it globally through MediaPlayerManager. After global management, all players’ mediaPlayers are assigned and controlled by MediaPlayerManager.

Relationships between components

The business process

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

Principle of player reuse (management)

Player reuse is a subset of management, so it’s covered here. The main principles are as follows:

  1. MediaPlayer controls the creation of up to four players.
  2. When you create a fifth player, destroy the MediaPlayer that is least used.
  3. Each player is randomly assigned a token (timestamp + random number), or can be specified by the developer.
  4. Players with the same token share the MediaPlayer.
  5. A MediaPlayer can be bound to and held by only one Surface player at a time.
  6. A player with the same token exists. When the current player is destroyed, the MediaPlayer instance is retained.
  7. If the created player resumes playing but the MediaPlayer is occupied by another player created later, unbind the MediaPlayer and rebind the current player.

Scenario simulation

Scenario 1: Create a total of four or more players in the APP.

Scenario 2: Creating more than four players.

Scenario 3: Reuse the MediaPlayer if the newly created player token already exists.

Scenario 4: The same token exists as the player token to be destroyed (or the player has been removed from the MediaPlayer).

Logical flow chart

To summarize the scenario, MediaPlayer mainly provides four capabilities: reuse, restore, destroy, and expel (create).

Animated transitions

Currently, there are two options for transition animation:

  1. Android comes with element animation

Advantages: smooth animation, no need to achieve animation logic, by the system itself. Disadvantages: serious intrusion, need to rewrite the Nav layer, in View reuse scheme has white screen and black screen.

  1. Custom implementation property animation

Advantages: small invasion, only need front page very little coordinate information, if it is View reuse scheme, do not even need front page to provide coordinate information; Good compatibility, suitable for various player reuse scenarios. Disadvantages: need to achieve their own animation, there is a certain sense of flickering.

The animation principles

  1. The front page jumps to immersion, passing player coordinate Rect information.
  2. Immersion defaults to transparency and creates players based on Rect coordinate information (reuse).
  3. Start the animation, zoom 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, otherwise the front page will not execute onStop (). See the next section, Life cycle pit filling.)

Ps: Return animation, the same process can be reversed.

Life cycle pit filling

There is a hole in the property animation principle.

Problem description: Assuming the page is A->B, plan 3 requires page B to be fully transparent during animation. When windowIsTranslucent is true in B’s theme, A->B process A’s life cycle cannot go to stop (even if THE B page animation ends, completely overshadowing A). Therefore, the life cycle of A does not perform as expected, and services cannot be executed in some scenarios where onStop is required

B Ativity 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>
Copy the code

Solution:

  1. At the end of the animation, the Activity always method convertFromalways is called by reflection, making it opaque.
  2. Back to the beginning of the animation, calling the Activity’s Converttoalways method by reflection, making the Activity always transparent.

Future optimization prospect

There is a lot more that can be done to optimize multimedia. In addition to the scenes of continuous play and immersive second play, we can also: 1. Optimize the second play for the general scenes of the player, such as the card video listed on the home page. 2. Control the global instance of the player and control the number of players to be created, thus optimizing the memory.

Not optimized: Operation: continuously open 30-50 pages and player. Symptom: Memory surge, hot mobile phone, affecting the normal use of mobile phone.

After optimization: Operation: open 1 page and player every second, continuously open 100 pages. Symptom: The memory increases normally in a zigzag pattern, and the software runs normally.

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

“Video cloud technology” your most noteworthy audio and video technology public account, weekly push from Ali Cloud front-line practice technology articles, here with the audio and video field first-class engineers exchange exchange. You can join ali Cloud video cloud product technology exchange group, and the industry together to discuss audio and video technology, get more industry latest information.