阿里妹導讀：從“叉手禮”、“水盆羊湯”、“酒暈妝”這些唐朝人的生活細節，到精美的坊間造型、充滿意境的詩詞歌賦，《長安十二時辰》不僅以縝密劇情贏得贊譽，更還原了一個真實的大唐長安。在精良制作之上，技術人如何讓觀眾感受1000多年前的長安風情、更深度的理解劇情呢？今天，咱們揭秘《長安十二時辰》背后的酷看體驗，解讀技術人看劇的正確姿勢。

想必細心的觀眾已經發現，《長安十二時辰》中出現了很多有人情味的“黑科技“，比如百科Tips、角色伴侶、劇情進展圖等，讓用戶“邊看劇邊互動”，這就是優酷的酷看模式。酷看模式在移動端采用了多路流的同屏展示、智能平滑切換、精準同步和動態化渲染等技術。其中動態化渲染、子母屏和多路流同步播放是酷看模式在端側的核心能力，能夠做到多路流、多機位視頻幀級同步播放。本文接下來要講一講和《長安十二時辰》相關的背后的一些核心技術。

播放器業務框架

這里必須要提一下優酷的播放器業務框架，該框架以一個簡單而優雅的模型解構了所有的播放器業務，我們稱之為OnePlayer，通過技術架構的解耦帶來了與之相關的技術團隊的組織架構的解耦，很好地適應了優酷復雜的播放業務場景，在該框架下酷看的功能其實是由一組彼此獨立的插件組合實現的。

播放器視圖模型

如上圖所示，該模型可以用簡單的幾句話加以描述：

• 播放器由多個層組成
• 層容器中布局插件
• 播放器發布消息
• 插件訂閱消息
• 層和插件信息來自配置文件

核心特性

該框架在設計之初就確定了一系列的優良特性作為設計目標，這些特性為我們后續實現酷看模式帶來了極大的便利。

• 基于消息，事件驅動：引入發布/訂閱的消息機制，插件按需訂閱播放器的事件，根據優先級響應和消費消息。
• 插件結構，互不依賴：將所有的播放功能及業務模塊解耦為彼此獨立的插件，插件之間以消息機制進行通信。
• 按需配置，自由組合：支持從xml配置文件加載層和插件的配置信息，各個業務方在接入業務框架時以搭積木的方式排列組合業務模塊構造播放器。
• 插件豐富，支持擴展：框架會提供一批功能豐富的標準插件，業務方可根據自己的需求定制插件來替換默認實現，也可以新增插件。
• 多例共存，彼此隔離：即可有多個播放器在一個頁面內同時運行，并且從不同的配置創建。

技術升級賦能業務開發

| 技術架構開放化

以插件的形式隔離和封裝不同的業務，清除業務之間的顯式依賴。基于新的業務框架，業務方一方面可以將標準插件排列組合創建個性化的播放器，尤其是一些基礎插件避免重復勞動；另一方面可以自定義新插件替換默認實現或者添加新業務插件，技術框架層面上支持業務團隊獨立完成播放器一整套的個性化定制。

| 業務開發標準化

在該播放器框架下，業務插件的頂層設計是統一的、標準化的。包括一致的構造函數、一致的創建過程、一致的生命周期、一致的播放器事件響應機制等。對于不同團隊業務代碼之間的相互理解和跨團隊統一作戰都有極大的優勢。在標準化的過程中，更容易產出一些通用插件被更多的業務所復用。

| 播放能力服務化

播放服務與播放業務邊界逐漸清晰，徹底結束業務代碼與播放能力代碼犬牙交錯的局面，彼此松綁，并行前進。播放服務內聚收斂具備了向OTT等業務類庫級輸出的可能性。

二、酷看百科

顧名思義，酷看百科主要是在視頻播放過程中給出一些類似百科的輔助用戶觀看的介紹性內容。例如劇中通過酷看百科說明“時辰計時制”和現在“24小時計時制”的對應關系，時辰制是看懂該劇的關鍵要素之一，無法理解各個時辰對應的時間自然也就無法體會劇情的緊張節奏。

技術特性上的需求來自兩個方面：

• 面向運營，運營希望有一個常態化的運營工具，簡單的通過運營后臺修改配置就完成投放，無需技術同學輔助，也不需要發版本；
• 面向用戶體驗，產品希望能夠根據用戶的偏好和視頻的內容做到UI風格多樣可動態調整的展示，能夠較好的與內容融合。

核心點

為了實現“動態化的內容投放和播放模式切換”，就必須解決兩個具體問題。即：

• 播放器如何進行不同播放模式的切換
• 端側采用什么技術來實現動態化的投放

對于問題1，我們將百科相關的業務也作為一組插件來實現，并且對播放器的業務插件進行了分組，利用了業務框架的插件管理器的基礎能力，能夠動態的啟用和禁用不同組的業務插件。

對于問題2，我們采用了阿里開源的Weex來實現UI動態化渲染，無需發版即可實現動態化布局，再結合后端的定投能力，就能夠實現按照不同樣式模版來動態的投放組件。

三、酷看子母屏

子母屏是酷看中使用較多的一種形態，所謂子母屏就是將設備區域劃分為兩大部分，同時投放多屏內容，較大的占據主視頻焦點的區域稱為母屏，一般用來播放正片；側邊的占據較小的視頻區域稱為子屏，一般用來投放與正片內容相關的輔助或者互動性的內容，這有點類似電視在直播比賽時在畫面里引入場邊的教練采訪畫面或者簡要的賽況數據。

分離母屏和子屏的資源

按照以往的做法會直接將要在副屏中展示的內容通過后期制作以合流的方式直接壓入正片視頻流中，不過在《長安十二時辰》中我們沒有采用這種方式。因為這種方式的缺點還是相對明顯：

• 對用戶不夠友好，難以按照用戶的偏好智能投放
• 對制作不夠友好，互動資源和正片資源直接耦合
• 對運營不夠友好，嚴重依賴后期制作無法獨立運營
• 對商業化不夠友好，內容廣告和媒體資源直接固化

以上缺點的根本就在于合流的方式導致相關內容以一種較為粗放的固化的方式投放給觀眾，無視觀眾的偏好；同樣也無視了多層次精細化的運營需求，這種綁定關系一次性消費掉了好內容。我們圍繞這個問題展開工作，分離母屏和子屏的資源，即不再需要在制作時合流而是讓正片內容和運營內容嚴格分離分開存儲和投放。副屏的內容投放將完全交由運營同學來完成，運營同學從模版庫中選擇相應的模版即可快速預覽和投放，不再依賴后期制作。

以上即為《長安十二時辰》中的一處子母屏投放效果，左側母屏為該劇集的正片，右側副屏是我們投放的張小敬所穿服飾的視頻介紹，豐富用戶的觀看體驗。

核心點

我們這里只講一個較為核心的點即播放器雙屏容器，雙屏的內容投放是彼此分離的，它是我們后續各種玩法的載體。

| 播放器雙屏容器

對于雙屏容器有一些具體的特性要求：

• 母屏的縮放尺寸能夠根據不同的屏幕寬度和視頻資源寬度自適應；
• 子屏同母屏一樣具有交互性，能夠響應用戶的手勢；
• 母屏縮放和子屏移入的動效同步。

設計師給出了母屏和子屏可以相互交錯疊壓的酷炫方案，甚至還有延伸至背景的異形遮罩效果，對于動效同步的要求也較高。為了解決縮放適配問題，我們寫了一套自適應的容器布局算法，能夠基于服務端下發的配置和視頻的尺寸計算出最終子母屏容器的布局模型和動效參數，然后再根據這套模型驅動渲染視圖以達到預期效果。

雙屏想要具備交互性響應用戶手勢主要的阻礙在于Z軸上有覆蓋在視頻層上的諸如彈幕等其他的遮罩層會攔截掉系統的觸屏事件，為此我們設計了OnePlayer手勢插件作為觸屏事件的代理，由這個代理按照優先級轉發手勢事件相關的訂閱者，這樣就突破了視圖層級對手勢的限制。

副屏的互動性作為通用能力，也被使用在其他的頭部節目中，例如在《這就是街舞2》中觀眾可以邊看街舞邊給支持的選手投毛巾。

四、雙流同步播放

在解決了子母屏的自動布局和交互性問題之后，用子母屏來承載雙路流的視頻同步播放則是更具挑戰的問題。雙路流的播放有兩個備選方案：

• 單播放器實例，子屏和母屏共同作為一個或者一組播放器插件存在，共享上下文；
• 雙播放器實例，子屏和母屏各作為一個播放器實例存在，具有各自的上下文；

我們選擇了雙實例的方案，因為 ：

• 產品形體來看，主副屏之間的主從關系是相對明確的，體現為副屏對主屏的單向狀態訂閱和同步；
• 工程角度來看，保持模型的簡單性是有益的，避免因為有兩個播放器引入復雜的上下文結構；

雙路流的觀影體驗設計時較為超前的，在當前的硬件條件下，能夠讓配置不是很高的用戶也能夠暢享酷看模式是非常有挑戰的。

主要的困難點在于：

1.系統性的誤差控制，需要全鏈路來保證

從視頻生產開始，視頻剪輯工具可能就具有10ms的以上誤差，然后再經過運營平臺錄入錨點，如果運營工具做不到幀對齊級別的錨點自動計算，那么最終對齊的效果也會受人工錄入數據偏差的影響；事實上，從生產到投放，再到端側解碼渲染，這個系統誤差一直在累積傳遞，對于這個誤差的控制是個系統工程。

2.播放器對做精準對齊提供的工具有限

播放器基礎Api本身執行也在10ms這個量級，例如啟動、暫停、Seek、變速等接口以及一些狀態回調都是異步的，甚至系統的sleep精度也是有限的，這些方法本身的執行時機和耗時都是不確定的，調用這些Api實現40ms級別的同步就好像大象捉老鼠一般困難。

3.設備多樣性和運行時隨機性適配困難

Android設備碎片化嚴重，性能分布頻譜寬廣，在單次追幀同步過程中，運行時狀態滿隨機性較大，無法事先給出全局通用的經驗值作為參數進行補償。

雙流同步的基本思路

| 要解決同步位置的錨定

這個位置目前是以主視頻時間軸為基準，這里采納主視頻的時鐘，有音頻時鐘，視頻時鐘或者外部時鐘三種選擇；

| 要解決對齊的技術手段本身不精準的問題

對齊的技術手段較多，對齊的過程根本上是一個“調節-反饋-修正”的遞歸過程，雖然模型相對簡單，但是需要達到想要的效果具體實現并不容易，涉及較多的實現技巧，例如提供更加精準的seek接口，盡量讓這些Api產生的誤差偏離方向一致，這樣我們就便于在累積誤差上做補償；

| 解決客戶端運行時的隨機性因素干擾

由于機型千差萬別，運行時狀態又充滿隨機性。這里就需要逐一梳理，消除隨機性的影響。例如，為了適應網絡狀態的隨機性，實現全局統一的緩存策略；為了平抑個體性能差異，我們引入了部分統計學的方法來做追幀補償，統計當前設備最近幾次追幀差值的方差和標準差作為下一次補償追幀的參數；針對人眼對播放速度變化的敏感性，訓練變速追幀的最佳變速曲線等。

我們通過架構設計、工程優化、算法升級和有針對性適配，打出全鏈路的組合拳，實現了多路流精準的同步播放，最終呈現了不錯的效果。這在下面《這就是街舞2》的示例中同步效果看起來更直觀。

“浮沙之上難筑高臺”，酷看模式在技術上創新是一個量變引起質變的過程，它得益于優酷乃至阿里集團在一些基礎核心技術上的積累，酷看模式給用戶提供更為舒適的沉浸式觀看體驗和豐富多樣的互動方式，是非常有意義的探索，其中遇到的技術挑戰讓我們看到了一些不足，也為整個播放技術鏈路的發展指明了方向，希望“酷看”是一只“會下金蛋的老母雞”。在解決了子母屏的自動布局和交互性問題之后，用子母屏來承載雙路流的視頻同步播放則是更具挑戰的問題。

原文鏈接
本文為云棲社區原創內容，未經允許不得轉載。

總結

以上是生活随笔為你收集整理的技术人看《长安十二时辰》的正确姿势是？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。