如何實作 iOS 短視頻跨頁面的無痕續播？

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

作者｜神捕
審校｜泰一

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

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

如上視頻所示，視頻在串列頁預覽觀看后，用戶很可能繼續點擊跳到下一個全屏頁面，進入沉浸式體驗，在這程序中，視頻視窗平滑變大至全屏，視頻進度是延續的，中間沒有感覺到視頻或音頻的停頓感，在頁面回傳后，視頻視窗也有相應的還原效果，

目標

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

實作方案

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

目前盒馬采用的是第 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，計算方式如下：

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 是有聲音，設定不同，也需要隔離，我們是這樣做的，如下圖（視圖層級）：

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

總結

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

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

標籤：其他

上一篇：遠程執行緒注入DLL突破session 0 隔離

下一篇：中國移動基于 Kubernetes 的物聯網邊緣計算應用實踐