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

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

播放器業(yè)務(wù)框架

這里必須要提一下優(yōu)酷的播放器業(yè)務(wù)框架，該框架以一個簡單而優(yōu)雅的模型解構(gòu)了所有的播放器業(yè)務(wù)，我們稱之為OnePlayer，通過技術(shù)架構(gòu)的解耦帶來了與之相關(guān)的技術(shù)團(tuán)隊(duì)的組織架構(gòu)的解耦，很好地適應(yīng)了優(yōu)酷復(fù)雜的播放業(yè)務(wù)場景，在該框架下酷看的功能其實(shí)是由一組彼此獨(dú)立的插件組合實(shí)現(xiàn)的。

播放器視圖模型

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

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

核心特性

該框架在設(shè)計(jì)之初就確定了一系列的優(yōu)良特性作為設(shè)計(jì)目標(biāo)，這些特性為我們后續(xù)實(shí)現(xiàn)酷看模式帶來了極大的便利。

• 基于消息，事件驅(qū)動：引入發(fā)布/訂閱的消息機(jī)制，插件按需訂閱播放器的事件，根據(jù)優(yōu)先級響應(yīng)和消費(fèi)消息。
• 插件結(jié)構(gòu)，互不依賴：將所有的播放功能及業(yè)務(wù)模塊解耦為彼此獨(dú)立的插件，插件之間以消息機(jī)制進(jìn)行通信。
• 按需配置，自由組合：支持從xml配置文件加載層和插件的配置信息，各個業(yè)務(wù)方在接入業(yè)務(wù)框架時以搭積木的方式排列組合業(yè)務(wù)模塊構(gòu)造播放器。
• 插件豐富，支持?jǐn)U展：框架會提供一批功能豐富的標(biāo)準(zhǔn)插件，業(yè)務(wù)方可根據(jù)自己的需求定制插件來替換默認(rèn)實(shí)現(xiàn)，也可以新增插件。
• 多例共存，彼此隔離：即可有多個播放器在一個頁面內(nèi)同時運(yùn)行，并且從不同的配置創(chuàng)建。

技術(shù)升級賦能業(yè)務(wù)開發(fā)

| 技術(shù)架構(gòu)開放化

以插件的形式隔離和封裝不同的業(yè)務(wù)，清除業(yè)務(wù)之間的顯式依賴。基于新的業(yè)務(wù)框架，業(yè)務(wù)方一方面可以將標(biāo)準(zhǔn)插件排列組合創(chuàng)建個性化的播放器，尤其是一些基礎(chǔ)插件避免重復(fù)勞動；另一方面可以自定義新插件替換默認(rèn)實(shí)現(xiàn)或者添加新業(yè)務(wù)插件，技術(shù)框架層面上支持業(yè)務(wù)團(tuán)隊(duì)獨(dú)立完成播放器一整套的個性化定制。

| 業(yè)務(wù)開發(fā)標(biāo)準(zhǔn)化

在該播放器框架下，業(yè)務(wù)插件的頂層設(shè)計(jì)是統(tǒng)一的、標(biāo)準(zhǔn)化的。包括一致的構(gòu)造函數(shù)、一致的創(chuàng)建過程、一致的生命周期、一致的播放器事件響應(yīng)機(jī)制等。對于不同團(tuán)隊(duì)業(yè)務(wù)代碼之間的相互理解和跨團(tuán)隊(duì)統(tǒng)一作戰(zhàn)都有極大的優(yōu)勢。在標(biāo)準(zhǔn)化的過程中，更容易產(chǎn)出一些通用插件被更多的業(yè)務(wù)所復(fù)用。

| 播放能力服務(wù)化

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

二、酷看百科

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

技術(shù)特性上的需求來自兩個方面：

• 面向運(yùn)營，運(yùn)營希望有一個常態(tài)化的運(yùn)營工具，簡單的通過運(yùn)營后臺修改配置就完成投放，無需技術(shù)同學(xué)輔助，也不需要發(fā)版本；
• 面向用戶體驗(yàn)，產(chǎn)品希望能夠根據(jù)用戶的偏好和視頻的內(nèi)容做到UI風(fēng)格多樣可動態(tài)調(diào)整的展示，能夠較好的與內(nèi)容融合。

核心點(diǎn)

為了實(shí)現(xiàn)“動態(tài)化的內(nèi)容投放和播放模式切換”，就必須解決兩個具體問題。即：

• 播放器如何進(jìn)行不同播放模式的切換
• 端側(cè)采用什么技術(shù)來實(shí)現(xiàn)動態(tài)化的投放

對于問題1，我們將百科相關(guān)的業(yè)務(wù)也作為一組插件來實(shí)現(xiàn)，并且對播放器的業(yè)務(wù)插件進(jìn)行了分組，利用了業(yè)務(wù)框架的插件管理器的基礎(chǔ)能力，能夠動態(tài)的啟用和禁用不同組的業(yè)務(wù)插件。

對于問題2，我們采用了阿里開源的Weex來實(shí)現(xiàn)UI動態(tài)化渲染，無需發(fā)版即可實(shí)現(xiàn)動態(tài)化布局，再結(jié)合后端的定投能力，就能夠?qū)崿F(xiàn)按照不同樣式模版來動態(tài)的投放組件。

三、酷看子母屏

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

分離母屏和子屏的資源

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

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

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

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

核心點(diǎn)

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

| 播放器雙屏容器

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

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

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

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

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

四、雙流同步播放

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

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

我們選擇了雙實(shí)例的方案，因?yàn)?：

• 產(chǎn)品形體來看，主副屏之間的主從關(guān)系是相對明確的，體現(xiàn)為副屏對主屏的單向狀態(tài)訂閱和同步；
• 工程角度來看，保持模型的簡單性是有益的，避免因?yàn)橛袃蓚€播放器引入復(fù)雜的上下文結(jié)構(gòu)；

雙路流的觀影體驗(yàn)設(shè)計(jì)時較為超前的，在當(dāng)前的硬件條件下，能夠讓配置不是很高的用戶也能夠暢享酷看模式是非常有挑戰(zhàn)的。

主要的困難點(diǎn)在于：

1.系統(tǒng)性的誤差控制，需要全鏈路來保證

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

2.播放器對做精準(zhǔn)對齊提供的工具有限

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

3.設(shè)備多樣性和運(yùn)行時隨機(jī)性適配困難

Android設(shè)備碎片化嚴(yán)重，性能分布頻譜寬廣，在單次追幀同步過程中，運(yùn)行時狀態(tài)滿隨機(jī)性較大，無法事先給出全局通用的經(jīng)驗(yàn)值作為參數(shù)進(jìn)行補(bǔ)償。

雙流同步的基本思路

| 要解決同步位置的錨定

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

| 要解決對齊的技術(shù)手段本身不精準(zhǔn)的問題

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

| 解決客戶端運(yùn)行時的隨機(jī)性因素干擾

由于機(jī)型千差萬別，運(yùn)行時狀態(tài)又充滿隨機(jī)性。這里就需要逐一梳理，消除隨機(jī)性的影響。例如，為了適應(yīng)網(wǎng)絡(luò)狀態(tài)的隨機(jī)性，實(shí)現(xiàn)全局統(tǒng)一的緩存策略；為了平抑個體性能差異，我們引入了部分統(tǒng)計(jì)學(xué)的方法來做追幀補(bǔ)償，統(tǒng)計(jì)當(dāng)前設(shè)備最近幾次追幀差值的方差和標(biāo)準(zhǔn)差作為下一次補(bǔ)償追幀的參數(shù)；針對人眼對播放速度變化的敏感性，訓(xùn)練變速追幀的最佳變速曲線等。

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

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

原文鏈接
本文為云棲社區(qū)原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。