在一切皆可視頻化的今天，短視頻內(nèi)容作為移動(dòng)端產(chǎn)品新的促活點(diǎn)，受到了越來(lái)越多的重視與投入。盒馬在秒播、卡頓率、播放成功率等基礎(chǔ)優(yōu)化之外，在用戶使用體驗(yàn)上引入了無(wú)痕續(xù)播能力，提升用戶觀看視頻內(nèi)容的延續(xù)性。本篇將分享盒馬在 iOS 短視頻方面的實(shí)踐干貨。

作者｜神捕

審校｜泰一

跨頁(yè)面續(xù)播是除秒播外另一個(gè)可以從體感上增加用戶體驗(yàn)的能力。由于一些業(yè)務(wù)場(chǎng)景需要在不同頁(yè)面上播放同一個(gè)視頻內(nèi)容的場(chǎng)景，而這些場(chǎng)景頁(yè)面切換往往是連續(xù)的，這就要求短視頻的播放也是連續(xù)。這樣才能使得體驗(yàn)上會(huì)有連貫性，讓用戶在進(jìn)入沉浸式頁(yè)面時(shí)，能流暢的過(guò)度，且無(wú)感知的繼續(xù)播放，從而產(chǎn)生連續(xù)不間斷的感受。下面我們開(kāi)始介紹盒馬短視頻的跨頁(yè)面續(xù)播能力和流暢的動(dòng)畫切換效果的流暢性。

盒馬 iOS 續(xù)播優(yōu)化對(duì)比

如上視頻所示，視頻在列表頁(yè)預(yù)覽觀看后，用戶很可能繼續(xù)點(diǎn)擊跳到下一個(gè)全屏頁(yè)面，進(jìn)入沉浸式體驗(yàn)。在這過(guò)程中，視頻窗口平滑變大至全屏，視頻進(jìn)度是延續(xù)的，中間沒(méi)有感覺(jué)到視頻或音頻的停頓感。在頁(yè)面返回后，視頻窗口也有相應(yīng)的還原效果。

目標(biāo)

接入簡(jiǎn)單，只需要關(guān)心并加一個(gè)參數(shù)，其它邏輯內(nèi)聚。
適配性好，支持裁剪模式的切換。
視頻、音頻無(wú)縫銜接，不能有任何停頓感。
頁(yè)面間播放狀態(tài)隔離，互不干擾。

實(shí)現(xiàn)方案

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

目前盒馬采用的是第 3 種 ——playerView 的復(fù)用方式，具體來(lái)說(shuō)，無(wú)痕續(xù)播的實(shí)現(xiàn)，至少需要以下幾個(gè)步驟：

用戶點(diǎn)擊，從 A 頁(yè)面跳轉(zhuǎn)到 B 頁(yè)面，如：domain/path?reusedPlayerView=0xyyyyyy, 在原有業(yè)務(wù)參數(shù)的基礎(chǔ)上，添加一個(gè) reusedPlayerView 參數(shù)，把 playerView 傳給下個(gè)頁(yè)面 。

B 頁(yè)面 HMTBPlayerView 的實(shí)例化：內(nèi)部實(shí)例化一個(gè)或復(fù)用 A 頁(yè)面的 reusedPlayerView。

playerView 的大小位置換算，實(shí)現(xiàn)切換動(dòng)畫。

從 B 頁(yè)面返回 A 時(shí)，實(shí)現(xiàn)退出動(dòng)畫并返還 playerView。

以上步驟不多，但具體實(shí)現(xiàn)起來(lái)是比較復(fù)雜的，下面我們將圍繞 4 個(gè)主要問(wèn)題的解決過(guò)程，來(lái)說(shuō)明具體實(shí)現(xiàn)方式。

尺寸變化的動(dòng)畫

正常來(lái)說(shuō)，只要計(jì)算好 playerView 的原始 Rect，以及最終 Rect，基于 UIView 做 frame 動(dòng)畫就可以簡(jiǎn)單實(shí)現(xiàn)窗口變大效果。但實(shí)現(xiàn)時(shí)發(fā)現(xiàn)，手淘播放器內(nèi)部重寫了 setFrame 方法，只要修改了 frame，playerView 將直接顯示為終態(tài)，動(dòng)畫沒(méi)有效果。

于是，這里采用了 CGAffineTransform 的 scale 實(shí)現(xiàn)：先把 playerView 的 frame 設(shè)置為終態(tài)，計(jì)算好變化前后的尺寸比例 ratio，設(shè)置 playerView.transform = CGAffineTransformMakeScale (ratio, ratio)，將其尺寸等比縮小為初始位置大小，而后就可以執(zhí)行 transform 的動(dòng)畫實(shí)現(xiàn)從起點(diǎn)到終點(diǎn)的變換。

需要注意的是，此處 ratio 的計(jì)算方式，是以 playerView 內(nèi)真實(shí)渲染的視頻尺寸計(jì)算，而不是 playerView 本身大小。

渲染 mode 的切換

視頻渲染本身可以設(shè)置為 ScaleAspectFit 或 ScaleAspectFill，目前在盒馬的場(chǎng)景中，存在一種 A 頁(yè)面的播放器為 fill mode，且 playerView 固定正方形，但跳轉(zhuǎn)到 B 頁(yè)面時(shí)，變成 fit mode，這樣就出現(xiàn)了一個(gè)在尺寸變化動(dòng)畫進(jìn)行時(shí)的 mode 切換的問(wèn)題。

上述通過(guò) setFrame 并修改 transform 的方式，可以實(shí)現(xiàn)把 playerView 大小變換成與動(dòng)畫前的初始大小一致，但是，如果此時(shí)存在 mode 切換需求就有可能出現(xiàn)計(jì)算后的大小不一致，比如從一個(gè) 9：16 長(zhǎng)方形的 playerview 變成一個(gè) 1 : 1 且 mode 為 fill 的正方形 playerView，此時(shí)寬度一致，但高度明顯多出了，直接做動(dòng)畫會(huì)導(dǎo)致初始狀態(tài)閃動(dòng)。

這里的解決方式，我們使用了 maskView 進(jìn)行 mode 切換過(guò)渡：首先，計(jì)算 maskView 分別在寬高上的 scale，然后設(shè)置 playerView.maskView.transform。計(jì)算方式如下：

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

這樣就實(shí)現(xiàn)利用 maskView，把 9:16 的長(zhǎng)方形顯示成 1:1 的可見(jiàn)區(qū)域，實(shí)現(xiàn)動(dòng)畫的起始位置重合。最后，結(jié)合上述 playerView.transform 動(dòng)畫，再添加一個(gè) maskView.transform 動(dòng)畫，二者配合，模擬出帶 mode 切換場(chǎng)景下的動(dòng)畫過(guò)渡效果。

主動(dòng)回收與主動(dòng)歸還策略

在實(shí)現(xiàn)了進(jìn)場(chǎng)動(dòng)畫之后，最重要的是需要考慮 playerView 復(fù)用邏輯，其中比較重要的一點(diǎn)就是 playerView 什么時(shí)候歸還給 A 頁(yè)面。

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

有可借 playerView 時(shí)，進(jìn)行借用；

復(fù)用的 playerview 不再使用時(shí)，及時(shí)主動(dòng)歸還；

當(dāng)出租方自己要使用時(shí)，發(fā)現(xiàn)租方還未返還，此時(shí)進(jìn)行主動(dòng)回收。

具體場(chǎng)景來(lái)說(shuō)：進(jìn)場(chǎng)時(shí)，判斷有 reusePlayerView，則進(jìn)行復(fù)用；當(dāng)沉浸式視頻（B 頁(yè)面，類似抖音）翻到下一個(gè)視頻時(shí)，上一個(gè)視頻進(jìn)行主動(dòng)歸還操作，如果用戶又劃回到第 1 個(gè)視頻，此時(shí)是 new 的 playerView 了；另外，當(dāng)用戶點(diǎn)擊頁(yè)面關(guān)閉時(shí)，主動(dòng)歸還（如果還未還的話）；特別要注意的是，這里還增加了一個(gè)主動(dòng)回收機(jī)制，場(chǎng)景比如用戶通過(guò)一些我們未知的方式，回到了頁(yè)面 A，此時(shí) reusePlayerView 是沒(méi)有主動(dòng)歸還的，但頁(yè)面 A 自己又需要 play，此時(shí)就觸發(fā)了主動(dòng)回收機(jī)制，保證當(dāng)前頁(yè)面可用。

有一點(diǎn)需要提一下的是，在頁(yè)面返回時(shí)也有動(dòng)畫，實(shí)現(xiàn)方面與上述類似，唯一區(qū)別是，返回時(shí)頁(yè)面可能 dealloc 了，動(dòng)畫會(huì)有問(wèn)題，所以我們做法是先把 playerView 從 B 頁(yè)面，添加到 window, 做好縮放動(dòng)畫，結(jié)束后，再主動(dòng)歸還給頁(yè)面 A。

狀態(tài)隔離

在使用播放器復(fù)用時(shí)，需要考慮一個(gè)重要的問(wèn)題，就是復(fù)用后，播放器狀態(tài)、設(shè)置的隔離。比如，在頁(yè)面 A 進(jìn)入頁(yè)面 B 后，播放器無(wú)痕續(xù)播，但播放器的狀態(tài)對(duì) A 來(lái)說(shuō)是暫停，對(duì)于 B 來(lái)說(shuō)必須是播放狀態(tài)，雖然二者使用的是同一個(gè) playerView。

這種隔離是很有必要的，比如業(yè)務(wù)想要引導(dǎo)用戶進(jìn)入頁(yè)面 A 的業(yè)務(wù)，在這里觀看視頻可以得積分，那么在他進(jìn)入頁(yè)面 B 時(shí)，就不應(yīng)該繼續(xù)結(jié)算積分（業(yè)務(wù)依賴了播放狀態(tài)通知）。還有，A 與 B 頁(yè)面的播放設(shè)置可能不同，A 可能是靜音，B 是有聲音，設(shè)置不同，也需要隔離。我們是這樣做的，如下圖（視圖層級(jí)）：

圖中，最外層的 view 是盒馬自己封裝的播放器 HMTBPlayerView，內(nèi)部有一個(gè)手淘的 TBMPBPlayerView，大小一樣。我們拿來(lái)做復(fù)用的其實(shí)是 TBMPBPlayerView 這一層，而把業(yè)務(wù)層的所有設(shè)置放在 HMTBPlayerView，這樣的話，在 TBMPBPlayerView 被移走時(shí)，重新根據(jù)新的 HMTBPlayerView 設(shè)置它，做好關(guān)聯(lián)，而舊的 HMTBPlayerView 設(shè)置不受影響，包括播放器回調(diào)。

總結(jié)

綜上，我們實(shí)現(xiàn)了一種播放器復(fù)用方式，在播放器內(nèi)部實(shí)現(xiàn)了窗口切換、狀態(tài)隔離等邏輯，對(duì) App 使用方來(lái)說(shuō)是幾乎無(wú)感的。該方案不僅可用在無(wú)痕續(xù)播場(chǎng)景上，今后也可以用在 App 內(nèi)全局播放器實(shí)例復(fù)用優(yōu)化方向。

「視頻云技術(shù)」你最值得關(guān)注的音視頻技術(shù)公眾號(hào)，每周推送來(lái)自阿里云一線的實(shí)踐技術(shù)文章，在這里與音視頻領(lǐng)域一流工程師交流切磋。公眾號(hào)后臺(tái)回復(fù)【技術(shù)】可加入阿里云視頻云產(chǎn)品技術(shù)交流群，和業(yè)內(nèi)大咖一起探討音視頻技術(shù)，獲取更多行業(yè)最新信息。

總結(jié)

以上是生活随笔為你收集整理的如何实现 iOS 短视频跨页面的无痕续播？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。