在一切皆可影片化的今天，短影片內容作為移動端產品新的促活點，受到了越來越多的重視與投入。盒馬在秒播、卡頓率、播放成功率等基礎最佳化之外，在使用者使用體驗上引入了無痕續播能力，提升使用者觀看影片內容的延續性。本篇將分享盒馬在 iOS 短影片方面的實踐乾貨。

作者｜神捕

審校｜泰一

![](https://ucc.alicdn.com/pic/developer-ecology/d7dfaa9988694e34b3c228274a132c7a.gif)

跨頁面續播是除秒播外另一個可以從體感上增加使用者體驗的能力。由於一些業務場景需要在不同頁面上播放同一個影片內容的場景，而這些場景頁面切換往往是連續的，這就要求短影片的播放也是連續。這樣才能使得體驗上會有連貫性，讓使用者在進入沉浸式頁面時，能流暢的過度，且無感知的繼續播放，從而產生連續不間斷的感受。下面我們開始介紹盒馬短影片的跨頁面續播能力和流暢的動畫切換效果的流暢性。

>https://v.youku.com/v_show/id_XNTgwNTk4NzQ4MA==.html

如上影片所示，影片在列表頁預覽觀看後，使用者很可能繼續點選跳到下一個全屏頁面，進入沉浸式體驗。在這過程中，影片視窗平滑變大至全屏，影片進度是延續的，中間沒有感覺到影片或音訊的停頓感。在頁面返回後，影片視窗也有相應的還原效果。

## 目標

接入簡單，只需要關心並加一個引數，其它邏輯內聚。
適配性好，支援裁剪模式的切換。
影片、音訊無縫銜接，不能有任何停頓感。
頁面間播放狀態隔離，互不干擾。

## 實現方案

在方案選擇上，主要考慮了以下三種：

![](https://ucc.alicdn.com/pic/developer-ecology/9ad92b7569e041e381144e4979d731dc.png)

目前盒馬採用的是第 3 種 ——playerView 的複用方式，具體來說，無痕續播的實現，至少需要以下幾個步驟：

1. 使用者點選，從 A 頁面跳轉到 B 頁面，如：domain/path?reusedPlayerView=0xyyyyyy, 在原有業務引數的基礎上，新增一個 reusedPlayerView 引數，把 playerView 傳給下個頁面 。
2. B 頁面 HMTBPlayerView 的例項化：內部例項化一個或複用 A 頁面的 reusedPlayerView。
3. playerView 的大小位置換算，實現切換動畫。
4. 從 B 頁面返回 A 時，實現退出動畫並返還 playerView。

以上步驟不多，但具體實現起來是比較複雜的，下面我們將圍繞 4 個主要問題的解決過程，來說明具體實現方式。

### 尺寸變化的動畫

正常來說，只要計算好 playerView 的原始 Rect，以及最終 Rect，基於 UIView 做 frame 動畫就可以簡單實現視窗變大效果。但實現時發現，手淘播放器內部重寫了 setFrame 方法，只要修改了 frame，playerView 將直接顯示為終態，動畫沒有效果。

於是，這裡採用了 CGAffineTransform 的 scale 實現：先把 playerView 的 frame 設定為終態，計算好變化前後的尺寸比例 ratio，設定 `playerView.transform = CGAffineTransformMakeScale (ratio, ratio)`，將其尺寸等比縮小為初始位置大小，而後就可以執行 transform 的動畫實現從起點到終點的變換。

需要注意的是，此處 ratio 的計算方式，是以 playerView 內真實渲染的影片尺寸計算，而不是 playerView 本身大小。

### 渲染 mode 的切換
影片渲染本身可以設定為 ScaleAspectFit 或 ScaleAspectFill，目前在盒馬的場景中，存在一種 A 頁面的播放器為 fill mode，且 playerView 固定正方形，但跳轉到 B 頁面時，變成 fit mode，這樣就出現了一個在尺寸變化動畫進行時的 mode 切換的問題。

上述透過 setFrame 並修改 transform 的方式，可以實現把 playerView 大小變換成與動畫前的初始大小一致，但是，如果此時存在 mode 切換需求就有可能出現計算後的大小不一致，比如從一個 9：16 長方形的 playerview 變成一個 1 : 1 且 mode 為 fill 的正方形 playerView，此時寬度一致，但高度明顯多出了，直接做動畫會導致初始狀態閃動。

這裡的解決方式，我們使用了 maskView 進行 mode 切換過渡：首先，計算 maskView 分別在寬高上的 scale，然後設定 `playerView.maskView.transform`。計算方式如下：

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

這樣就實現利用 maskView，把 9:16 的長方形顯示成 1:1 的可見區域，實現動畫的起始位置重合。最後，結合上述 playerView.transform 動畫，再新增一個 maskView.transform 動畫，二者配合，模擬出帶 mode 切換場景下的動畫過渡效果。

### 主動回收與主動歸還策略
在實現了進場動畫之後，最重要的是需要考慮 playerView 複用邏輯，其中比較重要的一點就是 playerView 什麼時候歸還給 A 頁面。

目前我們採用的是租借思路：

1. 有可借 playerView 時，進行借用；
2. 複用的 playerview 不再使用時，及時主動歸還；
3. 當出租方自己要使用時，發現租方還未返還，此時進行主動回收。

具體場景來說：進場時，判斷有 reusePlayerView，則進行復用；當沉浸式影片（B 頁面，類似抖音）翻到下一個影片時，上一個影片進行主動歸還操作，如果使用者又劃回到第 1 個影片，此時是 new 的 playerView 了；另外，當使用者點選頁面關閉時，主動歸還（如果還未還的話）；特別要注意的是，這裡還增加了一個主動回收機制，場景比如使用者透過一些我們未知的方式，回到了頁面 A，此時 reusePlayerView 是沒有主動歸還的，但頁面 A 自己又需要 play，此時就觸發了主動回收機制，保證當前頁面可用。

有一點需要提一下的是，在頁面返回時也有動畫，實現方面與上述類似，唯一區別是，返回時頁面可能 dealloc 了，動畫會有問題，所以我們做法是先把 playerView 從 B 頁面，新增到 window, 做好縮放動畫，結束後，再主動歸還給頁面 A。

### 狀態隔離

在使用播放器複用時，需要考慮一個重要的問題，就是複用後，播放器狀態、設定的隔離。比如，在頁面 A 進入頁面 B 後，播放器無痕續播，但播放器的狀態對 A 來說是暫停，對於 B 來說必須是播放狀態，雖然二者使用的是同一個 playerView。

這種隔離是很有必要的，比如業務想要引導使用者進入頁面 A 的業務，在這裡觀看影片可以得積分，那麼在他進入頁面 B 時，就不應該繼續結算積分（業務依賴了播放狀態通知）。還有，A 與 B 頁面的播放設定可能不同，A 可能是靜音，B 是有聲音，設定不同，也需要隔離。我們是這樣做的，如下圖（檢視層級）：

![](https://ucc.alicdn.com/pic/developer-ecology/6f3fba04a9324d05acc52f28bb37179e.png)

圖中，最外層的 view 是盒馬自己封裝的播放器 HMTBPlayerView，內部有一個手淘的 TBMPBPlayerView，大小一樣。我們拿來做複用的其實是 TBMPBPlayerView 這一層，而把業務層的所有設定放在 HMTBPlayerView，這樣的話，在 TBMPBPlayerView 被移走時，重新根據新的 HMTBPlayerView 設定它，做好關聯，而舊的 HMTBPlayerView 設定不受影響，包括播放器回撥。

## 總結

綜上，我們實現了一種播放器複用方式，在播放器內部實現了視窗切換、狀態隔離等邏輯，對 App 使用方來說是幾乎無感的。該方案不僅可用在無痕續播場景上，今後也可以用在 App 內全域性播放器例項複用最佳化方向。

>「影片雲技術」你最值得關注的音影片技術公眾號，每週推送來自阿里雲一線的實踐技術文章，在這裡與音影片領域一流工程師交流切磋。公眾號後臺回覆【技術】可加入阿里雲影片雲產品技術交流群，和業內大咖一起探討音影片技術，獲取更多行業最新資訊。

如何實現 iOS 短影片跨頁面的無痕續播？

相關文章