短視頻作為內(nèi)容重要的承載方式，是吸引用戶的重點(diǎn)，短視頻的內(nèi)容與體驗(yàn)直接關(guān)系到用戶是否愿意長(zhǎng)時(shí)停留。因此，體驗(yàn)的優(yōu)化就顯得尤為重要。

跨頁(yè)面續(xù)播

跨頁(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ù)不間斷的感受。

在優(yōu)化前，盒馬沉浸式短視頻播放頁(yè)面的體驗(yàn)與主流短視頻 App 有明顯差距。從卡片列表頁(yè)面跳轉(zhuǎn)視頻沉浸式頁(yè)面時(shí)，相同視頻無(wú)法續(xù)播，影響用戶觀賞和體驗(yàn)。下面主要介紹盒馬短視頻從普通展示頁(yè)進(jìn)入沉浸式頁(yè)面時(shí)跨頁(yè)面續(xù)播能力和流暢的動(dòng)畫(huà)切換效果的實(shí)現(xiàn)過(guò)程。

環(huán)境

• 手機(jī)：Pixel 4
• os：Android 10
• 播放器：淘寶播放器

效果對(duì)比

首先我們來(lái)看一下盒馬優(yōu)化前后與主流短視頻 App 的效果對(duì)比

問(wèn)題分析

從對(duì)比可以看出，續(xù)播的關(guān)鍵在于視頻流的復(fù)用以及頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。

◆ 視頻流的復(fù)用

要解決流的復(fù)用，同時(shí)又要保證進(jìn)入新的頁(yè)面時(shí)可以立即播放，不產(chǎn)生聲音和畫(huà)面的頓挫，這里根據(jù)上一篇 《揭秘盒馬鮮生 APP Android 短視頻秒播優(yōu)化方案》 的分析，必須要解決視頻下載，加載解碼的耗時(shí)。

• 根據(jù) 《揭秘盒馬鮮生 APP Android 短視頻秒播優(yōu)化方案》 里講到緩存原理，這里可以利用播放器播放同一個(gè)視頻（注意統(tǒng)一 URL，盒馬全部轉(zhuǎn)為 H.265）來(lái)避免多次下載。
• 加載解碼的耗時(shí)則需要播放器復(fù)用來(lái)解決。這里涉及到實(shí)現(xiàn)方案，可參照下一章的續(xù)播方案選型。

◆ 轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

轉(zhuǎn)場(chǎng)動(dòng)畫(huà)能顯著提高體感流暢度，但實(shí)現(xiàn)過(guò)程中需要考慮各種兼容問(wèn)題。

續(xù)播方案選型

在優(yōu)化前期，我們考慮了三種續(xù)播方案。

1. 播放器 View 跨頁(yè)面?zhèn)鬟f

優(yōu)點(diǎn)：思路簡(jiǎn)單，體驗(yàn)效果好。

缺點(diǎn)：業(yè)務(wù)侵入嚴(yán)重，不具通用性，播放器業(yè)務(wù)回調(diào)無(wú)法隔離，不利于續(xù)播放器管控。

2. 基于 Surface(View) 級(jí)別的全局播放器管理

優(yōu)點(diǎn)：體驗(yàn)效果好，能擴(kuò)展內(nèi)存管控，侵入性低。

缺點(diǎn)：實(shí)現(xiàn)復(fù)雜，需要改寫(xiě)底層 HMVideoView 的封裝邏輯；改造中易出現(xiàn)內(nèi)存泄漏，較難排查。

3. 基于 MediaPlayer 級(jí)別的全局播放器管理

優(yōu)點(diǎn)：無(wú)侵入，能擴(kuò)展內(nèi)存管控，實(shí)現(xiàn)快（可復(fù)用和擴(kuò)展淘寶播放器底層 token 機(jī)制）

缺點(diǎn)：需要一定的改造，體驗(yàn)比方案 1、2 略差（聲音有一瞬間的頓挫，不明顯）

盒馬最終選擇 方案 3 ，這里方案 2 和 3 原理是相同的，沒(méi)有明顯的優(yōu)劣之分，最終選擇方案 3 是因?yàn)檫@是目前穩(wěn)定性最高，成本最低的方法。后續(xù)的播放器續(xù)播、復(fù)用、管理的分析同樣適用于方案 2。

播放器續(xù)播、復(fù)用和管理

業(yè)務(wù)上，我們需要實(shí)現(xiàn)續(xù)播，通過(guò)問(wèn)題分析，我們已經(jīng)知道，通過(guò)視頻流的復(fù)用即可實(shí)現(xiàn)，而視頻流的復(fù)用這里選擇通過(guò)復(fù)用 MediaPlayer 實(shí)現(xiàn)（也可以復(fù)用 Surface+MediaPlayer）。

1 解耦播放器 View 與 MediaPlayer 層

將 MediaPlayer 從 TaobaoPlayerView 中拆解出來(lái)，通過(guò) MediaPlayerManager 進(jìn)行全局管理。全局管理后，所有的播放器的 MediaPlayer 都由 MediaPlayerManager 分配和控制。

各組建間關(guān)系

2 業(yè)務(wù)流程

確保業(yè)務(wù)流程中，只需要關(guān)心業(yè)務(wù)與 VideoView 之間的交互，底層播放器復(fù)用由 MediaPlayerManager 實(shí)現(xiàn)。

3 播放器復(fù)用（管理）原理

播放器復(fù)用是管理的一個(gè)子集，所以這里一起介紹。主要原來(lái)有以下幾個(gè)原則：

• 全局播放器（MediaPlayer）控制最多創(chuàng)建 4 個(gè)；
• 超過(guò) 4 個(gè)播放器，創(chuàng)建第 5 個(gè)時(shí)，先銷毀最少使用的播放器的 MediaPlayer；
• 每個(gè)播放器隨機(jī)分配一個(gè) token（時(shí)間戳 + 隨機(jī)數(shù)），也可以開(kāi)發(fā)者指定；
• 相同 token 的播放器，共享 MediaPlayer；
• 一個(gè) MediaPlayer 同時(shí)只能被 1 個(gè)播放器 Surface 所綁定和持有；
• 存在相同 token 的播放器，當(dāng)前播放器在銷毀時(shí)，保留 MediaPlayer 實(shí)例；
• 已創(chuàng)建的播放器恢復(fù)播放，但 MediaPlayer 被其他后創(chuàng)建的播放器占用時(shí)，解綁 MediaPlayer 并重新綁定當(dāng)前播放器。

4 場(chǎng)景模擬

場(chǎng)景一：APP 共創(chuàng)建 4 個(gè)及以內(nèi)播放器。

場(chǎng)景二：創(chuàng)建超過(guò) 4 個(gè)播放器時(shí)。

場(chǎng)景三：新創(chuàng)建的播放器 token 已存在時(shí)，復(fù)用 MediaPlayer。

場(chǎng)景四：存在 token 與當(dāng)前即將被銷毀的播放器 token 一致時(shí)（或已被解除 MediaPlayer 的播放器播放時(shí)）。

邏輯流程圖

從場(chǎng)景總結(jié)，MediaPlayer 主要提供 復(fù)用、恢復(fù)、銷毀、驅(qū)逐（創(chuàng)建） 四個(gè)能力。

轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

目前轉(zhuǎn)場(chǎng)動(dòng)畫(huà)有兩個(gè)方案可選：

1. Android 自帶的元素動(dòng)畫(huà)

優(yōu)點(diǎn)：動(dòng)畫(huà)流暢順滑，無(wú)需實(shí)現(xiàn)動(dòng)畫(huà)邏輯，由系統(tǒng)自己實(shí)現(xiàn)。

缺點(diǎn)：侵入嚴(yán)重，需要改寫(xiě) Nav 層，在 View 復(fù)用的方案下有白屏和黑屏。

2. 自定義實(shí)現(xiàn)屬性動(dòng)畫(huà)

優(yōu)點(diǎn)：侵入小，只需要前置頁(yè)極少的坐標(biāo)信息，如果是 View 復(fù)用方案，甚至不需要前置頁(yè)提供坐標(biāo)信息；兼容性好，適用于各種播放器復(fù)用場(chǎng)景。

缺點(diǎn)：需要自己實(shí)現(xiàn)動(dòng)畫(huà)，有一定的閃爍感。

動(dòng)畫(huà)原理

1. 前置頁(yè)跳轉(zhuǎn)到沉浸式，傳遞播放器坐標(biāo) Rect 信息；
2. 沉浸式默認(rèn)透明，并根據(jù) Rect 坐標(biāo)信息創(chuàng)建播放器（復(fù)用）；
3. 開(kāi)始動(dòng)畫(huà)，將播放器 View 放大至正確位置，同時(shí)背景不透明度增加。

（注意：這里最后要將沉浸式頁(yè)的主題設(shè)為不透明，否則前置頁(yè)不會(huì)執(zhí)行 onStop()   具體參考下一節(jié)，生命周期填坑。）

ps：返回動(dòng)畫(huà)同理，過(guò)程相反即可。

生命周期填坑

屬性動(dòng)畫(huà)原理存在一個(gè)坑。

問(wèn)題描述：

假設(shè)頁(yè)面為 A->B，方案 3 要求 B 頁(yè)面在動(dòng)畫(huà)過(guò)程中是全透明的。當(dāng) B 的 theme 中 windowIsTranslucent 為 true 時(shí)，A->B 過(guò)程 A 的生命周期無(wú)法走向 stop（即便 B 頁(yè)面動(dòng)畫(huà)結(jié)束，完全遮蓋 A 頁(yè)面）。因此，A 的生命周期沒(méi)有按照預(yù)期執(zhí)行，一些需要 onStop 執(zhí)行的場(chǎng)景下，業(yè)務(wù)就無(wú)法正常執(zhí)行

B Ativity 的樣式（注：示例代碼）：

<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>

解決方案：

1. 進(jìn)入動(dòng)畫(huà)結(jié)束時(shí)，通過(guò)反射調(diào)用 Activity 的 convertFromTranslucent 方法， 使 activity 不透明；
2. 返回動(dòng)畫(huà)開(kāi)始時(shí)，通過(guò)反射調(diào)用 Activity 的 convertToTranslucent 方法，使 activity 透明。

后續(xù)優(yōu)化展望

關(guān)于多媒體的優(yōu)化工作還有很多可以做。除了續(xù)播和沉浸式秒播等場(chǎng)景外，我們還可以：

1. 對(duì)播放器的一般性場(chǎng)景進(jìn)行秒播優(yōu)化，如首頁(yè)列表的卡片視頻；
2. 對(duì)播放器的全局實(shí)例管控，控制播放器創(chuàng)建數(shù)量，從而優(yōu)化內(nèi)存。

未優(yōu)化：

操作：連續(xù)開(kāi)啟 30～50 個(gè)頁(yè)面及播放器。

現(xiàn)象：內(nèi)存飆升，手機(jī)發(fā)燙，影響手機(jī)正常使用。

優(yōu)化后：

操作：每秒開(kāi)啟 1 個(gè)頁(yè)面和播放器，連續(xù)開(kāi)啟 100 個(gè)。

現(xiàn)象：內(nèi)存呈鋸齒狀正常上升，無(wú)明顯飆升現(xiàn)象，軟件運(yùn)行正常。