在可滾動的容器中播放視頻其實是有一定難度的——對設備資源的壓力可能會導致視頻丟幀，這會使滾動效果變的很差。此外，我們不希望用戶等待視頻加載，我們也不希望它在播放中碰到緩沖，因此視頻播放器需要快速啟動并流暢運行。縱觀市場上的各種設備，這些問題在 Android 上的挑戰還是很大的。

我們最近完成了 Android 平臺的新聞提要技術遷移，由我們的開源 UI 渲染框架 Litho 提供技術支持。Litho 支持異步布局和細粒度的回收利用，這不僅有助于優化新聞提要使其更有效地渲染內容，而且可以使我們的代碼更健壯、更易于擴展。我們希望將這些改進帶到視頻功能上來，以改善 Facebook 用戶的播放體驗，同時也為設計新用例的工程師們提供幫助。

構建一個視頻 UI 元素比我們所做的其他 UI 組件更具挑戰性。視頻組件使用了 Litho 的一些其他組件不需要的高級特性，同時也促使 Litho 創建了一些新的特性。新的 Litho 視頻組件引入了一些改進，從新聞提要的滾動性能到更靈活的設計，這些設計可以很容易地在不同的視頻功能中重用。這篇文章描述了我們在 Android 應用程序中重寫視頻播放器時所面臨的挑戰，以及 Litho 如何幫助克服這些困難的。

視頻新聞

新聞提要支持多種視頻新聞類型。有些類型的行為和外觀與其他的有所不同。視頻附件是一種常見的新聞類型，其中有常規視頻、Facebook Live 視頻、360 度視頻、gif 或其他類型的視頻，它們會附在一個普通的文章上。

其他的視頻新聞類型可以播放生成的視頻，贊助商的信息，或者短動畫。

想要支持所有這些變種會導致代碼難以維護和測試。我們提供視頻附件使用的主視頻視圖類叫 VideoAttachmentView。對于一些新聞類型，我們必須擴展這個視圖，以便重用和定制它來適應設計的需要。在某些情況下，我們不能在派生類中進行所有的更改，只能創建一個單獨的視圖類，這意味著需要將通用邏輯移到幫助類中。這進一步使代碼復雜化了。

新聞提要的滾動性能也會受到影響。RecyclerView 僅從相同類的類型中回收視圖，這意味著不能為常規視頻附件新聞類型回收像 SponsoredVideoAttachmentView 這樣的視圖，盡管 SponsoredVideoAttachmentView 繼承至 VideoAttachmentView。由于這種低效率的原因，RecyclerView 需要分配更多的視圖來容納不同的新聞類型，從而導致了更多的內存占用。另外，在視頻視圖展現在屏幕上之前，分配行為就要被觸發，這增加了它無法及時完成的可能性，甚至可能會導致丟幀。即使在一個新的布局中重用相同的 VideoAttachmentView 來優化它的表現，我們也需要創建一個新的視圖類型。因為我們另外添加了一層，這也使得視圖層次結構變的更深了。視圖層次越深，渲染的時間就越長。

設計視頻組件

Litho 用一種叫做“組件”的單位來定義 UI。它支持兩種主要類型的組件：MountSpec 和 LayoutSpec。MountSpec 定義了一個 UI 構建塊，例如一個文本或圖像組件。LayoutSpec 定義一個包含一個或多個組件的布局。在 Litho 中，使用組件結構來構造更復雜的組件是很常見的做法。LayoutSpec 可以定義一個包含其他 LayoutSpec 和 MountSpec 組件的布局，MountSpec 可以呈現一個特定的視圖或繪制視圖。

視頻組件是一個 UI 構建塊，這意味著我們需要一個 MountSpec 來定義它。一種方法是創建一個 MountSpec 來呈現 VideoAttachmentView，但我們還需要為其它擴展視圖創建另一個 MountSpec, 如 SponsoredVideoAttachmentView。雖然這做也是可行的，但最終我們還會遇到相同的重用性和可維護性的問題。另一種方法是創建一個 MountSpec 只呈現簡單的視頻視圖而不是 VideoAttachmentView，并將其添加到一個特定的新聞類型的 LayoutSpec 中。下圖演示了新組件之間的關系:

CoreVideoComponent 是一個有著最簡特性的任何視頻新聞都需要的 MountSpec。

@MountSpec
public class CoreVideoComponentSpec {

 @OnCreateMountContent
 static SimpleVideoView onCreateMountContent(ComponentContext context) {
  return new SimpleVideoView(context);
 }

 @OnPrepare
 static void onPrepare(
   ComponentContext context,
   @Prop VideoParams videoParams) {
  prefetchVideo(videoParams);
 }

 @OnMount
 static void onMount(
   ComponentContext context,
   SimpleVideoView videoView,
   @Prop VideoParams videoParams) {
  initVideoPlayback(videoView, videoParams);
 }

 @OnUnmount
 static void onUnmount(
   ComponentContext context,
   SimpleVideoView videoView,
   @Prop VideoParams videoParams) {
  cleanupVideoPlayback(videoView, videoParams);
 }
 ...
}

CoreVideoComponent 是 AutoplayVideoComponent 的子類，該組件是一個用于在新聞提要中注冊視頻的 LayoutSpec。所有新聞提要中的視頻都是在自動播放管理器上注冊的，但并不是所有的視頻都需要自動播放功能 (例如，全屏視頻播放器中的視頻)。

@LayoutSpec
public class AutoplayVideoComponentSpec {

 @OnCreateLayout
 static Component onCreateLayout(
   ComponentContext c,
   @Prop VideoParams videoParams) {
  registerVideoForAutoplay(videoParams);

  return CoreVideoComponent.create(c)
    .videoParams(videoParams)
    .build();
 }
 ...
}

最后, 我們將自動播放組件作為子類添加到 VideoAttachmentComponent 中。這個組件將一個視頻附件數據結構轉換為一個通用的視頻組件都能理解的屬性。

public class VideoAttachmentComponentSpec {

 @OnCreateLayout
 static Component onCreateLayout(
   ComponentContext c,
   @Prop VideoAttachmentInfo videoAttachmentInfo) {
  final VideoParams videoParams = createVideoParams(videoAttachmentInfo);

  return AutoplayVideoComponent.create(c)
    .videoParams(videoParams)
    .build();
 }
 ...
}

與 VideoAttachmentView 相比，這個設計提供了更多的靈活性。這些組件中的任何一個都可以添加到另一個 LayoutSpec 中，創建一個更復雜的組件并擴展它的功能或 UI 設計。Litho 鼓勵使用嵌套組件，以及組件組合，以構建更強大的功能。Litho 以最優的渲染性能優化了布局樹，構建出了扁平的視圖結構。

下面是一個創建視頻附件組件的示例，該組件顯示底部的水印:

@LayoutSpec
public class WatermarkVideoAttachmentComponentSpec {

 @OnCreateLayout
 static Component onCreateLayout(
   ComponentContext c,
   @Prop VideoAttachmentInfo videoAttachmentInfo) {

  return Column.create(c)
    .flexShrink(0)
    .alignContent(YogaAlign.FLEX_START)
    .child(
      VideoAttachmentComponent.create(c)
        .videoAttachmentInfo(videoAttachmentInfo))
    .child(
      Text.create(c)
        .text("Powered by Litho")
        .textColorRes(android.R.color.holo_green_light)
        .textSizeDip(25)
        .paddingDip(YogaEdge.LEFT, 5)
        .positionType(YogaPositionType.ABSOLUTE)
        .positionDip(YogaEdge.BOTTOM, 0)
        .positionDip(YogaEdge.START, 0))
    .build();
 }
}

新組件通過將其添加為子組件來重新使用視頻附件組件的所有代碼和 UI。

性能改進

除了支持更加靈活的設計之外，Litho 還提供了一些屬性和特性，幫助我們優化新聞提要中的視頻播放和整個應用的整體性能。

資源回收利用

Android 內置的 RecyclerView 可以基于視圖的類型將其保存在不同的緩存池中，這對于創建了很多不同類型視圖的用戶界面來說可能會是一個問題。

相比之下，Litho 的回收系統復用了更小的用戶界面構建模塊，比如文本或圖片，而不是整個視圖。通過使用一個核心視頻組件，同樣的視圖可以被循環使用于所有的視頻新聞類型。更有效的回收利用減少了對象的分配，進而提高了滾動性能。

預分配

新聞提要的第一個視頻新聞不能循環使用預先存在的視頻視圖，因為之前沒有視圖。當兩個視頻新聞同時出現在屏幕上時也需要注意：一個視頻視圖可以從以前的新聞中回收，但是第二個視圖需要新建。當 RecyclerView 需要分配一個新的視圖對象，特別是像視頻視圖那樣的復雜視圖時，會帶來丟幀的風險。我們希望優化這種情況，因此我們在 Litho 中創建了預分配功能。

通過向 MountSpec 注解中添加一些屬性，我們可以讓 Litho 提前創建一些實例。當滾動瀏覽新聞提要中的第一個視頻新聞時，預分配的視頻視圖可以極大地提高滾動性能。

@MountSpec(poolSize = 3, canPreallocate = true)
public class CoreVideoComponentSpec {
  ...
}

MountSpec 有一些實用且簡單的生命周期回調方法。這些足以讓我們將大部分視頻播放邏輯封裝在組件中。在 Litho 之前，這個邏輯會被分散到不同的類中，由一個單獨的控制器觸發。視頻組件中的主要回調方法包括:

onPrepare- 開始預取視頻。在視頻組件出現之前，在后臺線程上觸發。

onMount- 初始化視頻播放器。組件首次配置其視圖屬性時觸發。

onUnmount- 清除視頻播放器，為下一次使用做準備。當視頻滾動走時被觸發。

LayoutSpec 有一個主要的回調：onCreateLayout()。它的主要目的是構造 LayoutSpec 的布局，但是它也可以為其子組件準備資源。例如，封面照片 LayoutSpec 可以在上面創建一個帶有視頻和封面照片的布局，同時還可以觸發封面照片的預抓取，所有這些都是在同一個回調方法中進行的。

MountSpec 還支持另一個實用的回調：shouldUpdate()。當 RecyclerView 的適配器被更新時，它可以重新綁定所有的子視圖，并獲得所有可見的組件并重新加載 (觸發 onUnmount 和 onMount)。對于簡單的組件，這沒有明顯的影響，但是重新配置一個視頻播放器就會是一個比較繁重的操作。這個回調是在 Litho 重新加載組件之前調用的，如果你覺得它沒有必要的話 (例如，加載相同的視頻)，我們可以選擇跳過它。

@ShouldUpdate(onMount = true)
static boolean shouldUpdate(@Prop Diff videoParamsDiff) {
 return videoParamsDiff.getNext().videoId != videoParamsDiff.getPrevious().videoId;
}

新組件的模塊化有助于更輕松地測試視頻播放邏輯。Litho 提供了一個測試框架，可以在單元測試中模擬組件的生命周期。通過將更多的視頻播放邏輯封裝在這些組件中，我們可以測試和驗證我們以前無法使用的復雜場景。此外，通過使用組合而不是繼承來擴展功能，會更安全、更容易維護。

結 論

通過使用傳統的 Android 視圖，Litho 幫助我們通過一次構建就可以提升視頻實現的性能、效率、可擴展性和可維護性。該視頻組件在整個 Facebook 的 Android 應用程序中提升了 20% 的滾動性能，同時也改善了我們的冷啟動時間，使我們的內存崩潰率降低了 2.5%，這都是更有效的內存管理的結果。代碼的改進不僅改善了 Facebook 的體驗，還讓工程師有了更多在 Facebook 應用中創建新的視頻體驗的余地。

Litho 允許我們在 Android 上編寫高度優化的 UI。Litho 于 2017 年 4 月開源，此后一直在成長。在去年年底，我們啟動了 Sections 項目，它是基于 Litho 構建的用于編寫高度優化的列表界面的 API。轉換到 Litho 和 Sections 后，通常會有大幅度的性能提升，比如滾動性能提升可能高達 42%。使用 Litho 很簡單并且文檔豐富。可以查看 Litho 網站和 GitHub 頁面上的代碼示例、教程和高級指南。