How Hema Achieved Seamless Cross‑Page Video Playback on iOS

In today’s video‑centric mobile world, short video is a key engagement point, and Hema has added a “seamless cross‑page playback” feature to improve user experience on iOS.

Goals:

Simple integration – only one extra parameter is needed.

Good adaptability, supporting cut‑mode switching.

Video and audio transition without any pause.

Playback state isolation between pages.

Implementation approach:

Hema chose the third option – reusing a playerView. The process includes:

User taps a link from page A to page B, adding a reusedPlayerView parameter (e.g., domain/path?reusedPlayerView=0xyyyyyy).

Page B instantiates HMTBPlayerView, either creating a new instance or reusing the one from page A.

Calculate size and position changes to drive the transition animation.

When returning from page B to page A, play the exit animation and return the playerView.

Size‑change animation:

Because the internal player overrides setFrame, a simple frame animation does not work. Instead, the final frame is set first, the scale ratio is computed, and

playerView.transform = CGAffineTransformMakeScale(ratio, ratio)

is applied, then animated.

Render mode switching:

When the source page uses ScaleAspectFill (square) and the destination page uses ScaleAspectFit (9:16), a mask view is used to transition smoothly. The mask view’s scale is calculated and applied via playerView.maskView.transform.

CGAffineTransformMakeScale(originalRect.size.width/(destRect.size.width*ratio), originalRect.size.height/(destRect.size.height*ratio))

Active recycling and return strategy:

If a reusable playerView exists, borrow it.

When the borrowed view is no longer needed, return it promptly.

If the owner needs the view while it is still borrowed, actively reclaim it.

State isolation:

Even though the same playerView is shared, its playback state and settings must be isolated per page (e.g., pause on page A, play on page B; mute on A, sound on B). Hema wraps the third‑party player inside a custom HMTBPlayerView so that page‑specific settings are reapplied after each reuse.

Summary:

Hema implemented a player‑view reuse mechanism that handles window transition, mode switching, active recycling, and state isolation, providing an almost invisible seamless playback experience. The solution can also be extended to global player reuse across the app.