小程序直播播放器的架構演進——從“代碼拷貝”到“三層複用” 詳情 - 小程序,直播保利威直播博客

小程序作為可在微信生態內便捷獲取和傳播的輕量化應用形態，自誕生以來便廣受市場青睞。為積極響應客户需求，保利威產品研發團隊陸續推出了多套適用於小程序端的直播接入方案。

初期，為幫助客户簡單快速地在小程序中集成直播能力，我們開發了「直播播放器邏輯層」。之所以説是邏輯層，是因為它實現的功能僅僅是從後端接口讀取拉流地址、直播狀態等關鍵信息，並將數據回調到外部業務邏輯，同時完成必要的數據上報。客户要自行處理界面細節，例如在 WXML 文件中放置小程序的 live-player 控件，並通過邏輯層的回調，將拉流地址傳入該控件進行播放。

隨着小程序生態的不斷成熟，客户對直播功能提出了更高要求，例如希望直播間具備聊天、簽到、抽獎等互動功能。為此，我們進一步推出了包含完整 UI 的「直播小程序 SDK」，其中內置了「直播播放器組件」。該組件在技術實現上，核心邏輯基於原有的「播放器邏輯層」開發，界面則基於小程序的 live-player（播放直播）和 video（播放回放）控件進行封裝，具備暖場視頻、線路選擇、回放等保利威提供的能力。

後來，部分客户反饋小程序的 live-player 控件所需類目的申請流程較為繁瑣。為了降低接入門檻，我們在「直播小程序 SDK」播放器組件的基礎上，進一步開發了「直播播放器插件」。由於兩者接口近似，所以「直播小程序 SDK」既可以集成播放器組件，也可以集成插件，滿足不同類目小程序的接入需求。

重構

隨着上述三個小程序播放器方案的逐步推出，技術債務也積累成型了——三者雖功能相似，但代碼獨立，功能也有一定差異，導致維護成本顯著增加。為此，重構工作提上了日程。

直播小程序播放器的三層架構

我們以原「直播播放器邏輯層」為核心，開發播放器組件，該組件可進一步封裝為小程序插件，形成“核心層—組件層—插件層”三層架構。三者雖然層層依賴，卻又各自獨立，客户可根據實際需求靈活選擇接入層級，兼顧了靈活性與可維護性。

個性化

考慮到客户的界面個性化需求，組件層新增了插槽設計，支持自定義控制欄上的大部分按鈕。插件層是對組件層的封裝，因此這兩層都支持通過插槽自定義控制欄按鈕。例如：

<plv-live-player
  config="{{ config }}"
  controlSlots="{{ [ 'skin-play', 'skin-pause' ] }}"
>
  <!-- 自定義播放按鈕樣式 -->
  <view
    slot="skin-play"
    style="background: url('my-play-icon.png');"
  ></view>

  <!-- 自定義暫停按鈕樣式 -->
  <view
    slot="skin-pause"
    style="background: url('my-pause-icon.png');"
  ></view>
</plv-live-player>

倘若插槽仍不能滿足界面個性化需求，客户也可以基於開源的組件層源代碼進行二次開發，或者基於核心層自行開發播放器組件。