七牛云于 6 月底宣布了一個針對視頻直播的及時流網絡 LiveNet 和完整的直播云辦理方案，許多開拓者對這個網絡息爭決方案的細節和利用場景很是感樂趣。

團結七牛及時流網絡 LiveNet 和直播云辦理方案的實踐，我們用八篇文章，更系統化地先容當下大熱的視頻直播各環節的要害技能，輔佐視頻直播創業者們更全面、深入地相識視頻直播技能，更好地技能選型。

本系列文章綱要如下：

(一)開篇

(二)收羅

(三)處理懲罰

(四)編碼和封裝

(五)推流和傳輸

(六)延遲優化

(七)現代播放器道理

(八)SDK 機能測試模子

在上一篇延遲優化中，我們分享了不少簡樸實用的調優能力。本篇是《視頻直播技能詳解》系列之七：現代播放器道理。

連年來，多平臺適配需求的增長導致了流媒體自適應碼率播放的鼓起，這迫使 Web 和移動開拓者們必需從頭思考視頻技能的相關邏輯。首先，巨頭們分分宣布了 HLS、HDS 和 Smooth Streaming 等協議，把所有相關細節都埋沒在它們專供的 SDK 中。開拓者們沒法自由的修改播放器中的多媒體引擎等邏輯：你沒法修改自適應碼率的法則緩和存巨細，甚至是你切片的長度。這些播放器大概用起來簡樸，可是你沒有太多去定制它的選擇，即即是糟糕的成果也只能忍受。

可是跟著差異應用場景的增加，可定制化成果的需求越來越強。僅僅是直播和點播之間，就存在差異的 buffer 打點、ABR 計策緩和存計策等方面的不同。這些需求催生了一系列更為底層關于多媒體操縱 API 的降生：Flash 上面的 Netstream，HTML5 上的 Media Source Extensions，以及 Android 上的 Media Codec，同時業界又呈現了一個基于 HTTP 的尺度流名目 MPEG-DASH。這些更高級的本領為開拓者提供了更好的機動性，讓他們可以構建適合本身業務需求的播放器和多媒體引擎。

本日我們來分享一下如何構建一個現代播放器，以及構建這樣一個播放器需要哪些要害組件。凡是來說，一個典范的播放器可以解析成三部門：UI、 多媒體引擎息爭碼器，如圖 1 所示：　　

圖 1. 現代播放器架構

用戶界面(UI)：這是播放器最上層的部門。它通過三部門差異的成果特性界說了終端用戶的寓目體驗：皮膚(播放器的外觀設計)、UI(所有可自界說的特性如播放列表和社交分享等)以及業務邏輯部門(特定的業務邏輯特性如告白、設備兼容性邏輯以及認證打點等)。

多媒體引擎：這里處理懲罰所有播放節制相關的邏輯，如描寫文件的理會，視頻片斷的拉取，以及自適應碼率法則的設定和切換等等，我們將在下文中具體講授這部門內容。由于這些引擎一般僻靜臺綁定的較量緊，因此大概需要利用多種差異的引擎才氣包圍所有平臺。

解碼器和 DRM 打點器：播放器最底層的部門是解碼器和 DRM 打點器，這層的成果直接挪用操縱系統袒暴露來的 API。解碼器的主要成果在于解碼并渲染視頻內容，而 DRM 打點器則通過解密進程來節制是否有權播放。

接下來我們將利用例子來先容各層所飾演的差異腳色。

一、用戶界面(UI)

UI 層是播放器的最上層，它節制了你用戶所能看到和交互的對象，同時也可以利用你本身的品牌來將其定制，為你的用戶提供奇特的用戶體驗。這一層最靠近于我們說的前端開拓部門。在 UI 內部，我們也包括了業務邏輯組件，這些組件組成了你播放體驗的奇特性，固然終端用戶沒法直接和這部門成果舉辦交互。

UI 部門主要包括三大組件：

1. 皮膚

皮膚是對播放器視覺相關部門的統稱：進度節制條、按鈕和動繪圖標等等，如圖 2 所示。和大部門設計類的組件一樣，這部門組件也是利用 CSS 來實現的，設計師可能開拓者可以很利便的拿來集成(即便你利用的是 JW Player 和 Bitdash 這種整套辦理方案)。　　

圖 2. 播放器皮膚

2. UI 邏輯

UI 邏輯部門界說了播放進程中和用戶交互方面所有可見的交互：播放列表、縮略圖、播放頻道的選擇以及社交媒體分享等。基于你預期到達的播放體驗，還可以往這部門中插手許多其它的成果特性，個中有許多以插件的形式存在了，或者可以從中找到一些靈感：https://github.com/videojs/video.js/wiki/Plugins#community-plugins

UI 邏輯部門包括的成果較多，我們紛歧一具體先容，直接以 Eurosport 播放器的 UI 來作為例子直觀感覺一下這些成果。　　

圖 3. Eurosport 播放器的用戶界面