【Flutter】雙路視頻播放方案

最近在做雙路視頻播放，就是在一個頁面播放兩個視頻。我遇到的問題就是音頻焦點沖突問題，在下面說明。

什么是雙路視頻播放（來自AI）

雙路視頻播放（Dual-Video Playback），從字面上理解，就是指在一個屏幕或應用界面上，同時解碼和渲染兩個獨立的視頻流。

可以把它想象成有兩列火車在兩條并行的軌道上同時行駛，你可以同時看到兩列火車的狀態。這兩個視頻流可以有多種關系和布局方式。

核心特征

兩個獨立的視頻源: 這不是將一個視頻畫面分割成兩半，而是實實在在地處理兩個不同的視頻文件或網絡流。例如，一個是?video_A.mp4，另一個是?video_B.mp4。
同時播放: 兩個視頻在時間上是同步或并行播放的。播放/暫停/快進等操作可能聯動控制兩個視頻，也可能允許獨立控制。
精確同步（關鍵特性）: 在很多場景下，雙路視頻播放的難點和核心在于保持兩個視頻畫面的精確時間同步。例如，如果視頻A的第5秒100毫秒對應的是視頻B的第5秒100毫秒，那么在播放時必須保證它們始終對齊，不能出現一個快一個慢的情況。
靈活的布局: 兩個視頻的畫面可以有多種呈現方式：
- 畫中畫 (Picture-in-Picture, PiP)：一個小視頻窗口懸浮在一個大視頻窗口之上。
- 左右分屏 (Side-by-Side)：屏幕一分為二，左邊播放一個視頻，右邊播放另一個。
- 上下分屏 (Top-and-Bottom)：屏幕一分為二，上邊播放一個視頻，下邊播放另一個。
- 疊加融合 (Overlay/Blending)：一個視頻作為背景，另一個半透明地疊加在上面。

常見的應用場景

雙路視頻播放技術非常有價值，因為它能提供單一視頻無法實現的信息維度和交互體驗。

應用領域	具體場景描述	示例
在線教育/網絡課程	一路視頻播放老師的講課畫面，另一路同步播放課件PPT或屏幕操作的錄像。	網易云課堂、Coursera等平臺，老師頭像在角落，主屏幕是課件。
視頻剪輯/后期制作	在調色或添加特效時，一路播放原始素材，另一路實時播放處理后的效果，方便進行對比。	Adobe Premiere Pro, Final Cut Pro 中的對比視圖功能。
體育賽事直播/分析	一路播放賽場的全景視角，另一路播放某個運動員的特寫視角或精彩回放。	足球比賽中，同時展示球場全景和某個球星的個人鏡頭。
安防監控	在一個屏幕上同時顯示來自不同攝像頭的實時監控畫面。	大樓的安保中心，監控墻上顯示著多個區域的實時視頻。
無障礙功能 (Accessibility)	一路播放主視頻內容，另一路在角落同步播放手語翻譯的視頻。	很多新聞發布會或官方視頻會提供手語翻譯版本。
3D/VR/360°視頻	這是一種特殊形式的雙路視頻，系統為左眼和右眼分別渲染一個視頻流，從而創造出立體感和沉浸感。	YouTube VR, Oculus TV 等 VR 應用。
互動視頻/游戲	允許用戶在不同視角或故事線之間切換，系統在后臺可能需要同時準備好多個視頻流以實現無縫切換。	一些互動電影或真人游戲。

技術挑戰

實現穩定流暢的雙路視頻播放并非易事，尤其是在移動端。

性能消耗巨大: 解碼兩個視頻流（尤其是高清視頻）需要雙倍的CPU/GPU計算資源。這會顯著增加設備的功耗、發熱量，并可能導致卡頓或掉幀。這也是為什么你之前會遇到內存溢出等問題的原因之一，處理雙路視頻對內存管理的要求更高。
同步難題: 保持兩個視頻流的精確同步是一個巨大的挑戰。網絡延遲的抖動（Jitter）、解碼速度的差異都可能導致音畫或兩個畫面之間出現偏移。需要復雜的時鐘同步機制來校準。
音軌處理: 兩個視頻通常都有自己的音軌。如何處理音頻？
- 只播放其中一個視頻的音頻？
- 將兩個音軌混合（Mix）在一起？
- 讓用戶自己選擇聽哪一個？
  這都需要在產品設計和技術實現上仔細考慮。
復雜的播放器控制邏輯: 一個播放器現在需要管理兩個視頻源的狀態，播放/暫停、快進/快退、緩沖狀態、錯誤處理等邏輯都變得復雜了一倍。

總而言之，雙路視頻播放是一項強大的功能，它通過在同一時間呈現更多維度的視覺信息，極大地豐富了應用的功能和用戶體驗，但同時也對應用的性能優化和技術實現提出了更高的要求。

初方案

`video_player` 插件

創建兩個獨立的 `VideoPlayerController` 實例，分別控制兩個視頻的播放。

代碼

寫在開頭，重點就是被注釋掉的那句，其實沒必要往下看。

    VideoPlayerController controller1 = VideoPlayerController.networkUrl(Uri.parse(videoUrl),//videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true), //是的，一開始沒加這句！！！這就是問題所在);VideoPlayerController controller2 = VideoPlayerController.networkUrl(Uri.parse(videoUrl),//videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),);

?組件代碼，只是簡單的模擬

@override
Widget build(BuildContext context) {return Scaffold(body: Center(child: Row(children: <Widget>[Expanded(child: _controller1.value.isInitialized? AspectRatio(aspectRatio: _controller1.value.aspectRatio,child: VideoPlayer(_controller1), //這里): Container(),),Expanded(child: _controller2.value.isInitialized? AspectRatio(aspectRatio: _controller2.value.aspectRatio,child: VideoPlayer(_controller2),//這里): Container(),),],),),floatingActionButton: FloatingActionButton(onPressed: () {togglePlayPauseBoth();},child: Icon(_controller1.value.isPlaying ? Icons.pause : Icons.play_arrow,),),);
}void setVolumeBoth(double volume) {controller1?.setVolume(volume);  //注意這里少了一個}void togglePlayPauseBoth() {final bool isPlaying = controller1?.value.isPlaying ?? false;if (isPlaying) {pauseBoth();} else {playBoth();}}void playBoth() {controller1?.play();controller2?.play();}void pauseBoth() {controller1?.pause();controller2?.pause();}void seekBoth(Duration position) {controller1?.seekTo(position);controller2?.seekTo(position);}

問題描述

點擊播放只有第一個視頻播放，而且播放按鈕play_arrow -> pause -> play_arrow。

原因分析

經過了一些不必要的彎路，我終于看到了日志

D/AudioManager(31189): dispatching onAudioFocusChange(-1) ...

?這一行日志就是問題的“確鑿證據”。它告訴我們，系統正在向您的應用發送一個“音頻焦點丟失” (AUDIOFOCUS_LOSS) 的通知。

問題根源：音頻焦點沖突

什么是音頻焦點？?在Android系統中，為了避免多個應用同時播放聲音造成混亂，只有一個應用可以在同一時間“持有”音頻焦點。
發生了什么？?當您調用?playBoth()?時，視頻播放器1(controller1)和視頻播放器2(controller2)?同時向系統請求音頻焦點。
系統如何反應？?Android系統看到來自同一個應用的第二個音頻請求，會認為第一個請求應該被放棄。因此，它會立即給第一個請求者發送一個AUDIOFOCUS_LOSS通知。
video_player插件的默認行為：video_player插件在收到“音頻焦點丟失”的通知后，會非常“懂事”地自動暫停播放。