整合微短劇方案-Flutter - ApsaraVideo VOD

微短劇方案Flutter端是基於Flutter含UI整合方案AliPlayerWidget實現的。

概述

AliPlayerWidget 是一款專為 Flutter 應用程式設計的高效能視頻播放組件，基於阿里雲播放器 SDK（flutter_aliplayer）構建。它支援多種播放情境，包括ApsaraVideo for VOD（VOD）、直播、列表播放和短劇情境等。該組件提供了豐富的功能集，並具有高度靈活的 UI 定製能力，能夠滿足各類應用的需求，如教育、娛樂、電商和短劇等。有關更多資訊，請參閱Flutter播放器含UI整合方案。

aliplayer_widget_example 是基於 aliplayer_widget Flutter 庫搭建的樣本工程，旨在協助開發人員快速上手並深入理解如何在實際專案中整合和使用 AliPlayerWidget；通過此工程，您可以學習如何搭建並使用短視頻列表播放。

環境要求

類別	說明
Flutter 版本	不低於2.10.0，推薦使用3.22.2。
JDK 版本	推薦使用JDK 11。說明 JDK 11設定方法：Preferences -> Build, Execution, Deployment -> Build Tools -> Gradle -> Gradle JDK -> 選擇 11（如果沒有11，請升級你的Android Studio版本）
Android 版本	支援Android 6.0以上版本，Gradle 版本不低於 7.0。
iOS 版本	支援iOS 10.0及以上版本。
手機晶片	架構要求：armeabi-v7a、arm64-v8a。
開發工具	推薦使用Android Studio或Visual Studio Code。

前提條件

您已經擷取播放器SDK License專業版的授權及License Key，應用的綁定步驟請參見綁定License。

Demo體驗

下載Demo

aliplayer_widget 已經開源並提供多種下載方式。如果您需要對組件進行自訂修改，您可以使用源碼依賴的方式，直接擷取並修改源碼。完整源碼可通過以下方式擷取：

下載說明	下載地址
Pub 源	Pub 官方源：pub.dev 中國鏡像源：pub.flutter-io.cn 說明 aliplayer_widget 推薦開發人員通過包管理工具整合
Pub 源
GitHub	Github地址
源碼包	aliplayer_widget.zip

下載包的內容包括：

核心組件：AliPlayerWidget 和 AliPlayerWidgetController 的完整實現。
樣本工程：aliplayer_widget_example 提供點播、直播、列表播放等情境的程式碼範例，協助開發人員快速整合和使用。
文檔與注釋：源碼包含詳細注釋和開發指南，便於二次開發與定製。

整合方式

手動添加依賴

在您的 pubspec.yaml 檔案中添加以下依賴：

dependencies:
  aliplayer_widget: ^x.y.z

說明

注意：x.y.z 表示 aliplayer_widget 的版本號碼。您可以在 Pub.dev 官方頁面中查看最新穩定版本號碼，並將其替換為實際值（例如 ^7.0.0）。

使用命令列工具

如果您更傾向於使用命令列，可以直接運行以下命令來添加依賴：

flutter pub add aliplayer_widget

該命令會自動更新您的 pubspec.yaml 檔案。

無論您選擇哪種方式，完成依賴添加後，請在終端中運行以下命令以安裝依賴：

flutter pub get

通過上述步驟，AliPlayerWidget 就已成功整合到您的專案中，您可以開始使用它了！

編譯與運行

命令列方式運行

複製倉庫
首先，複製 aliplayer_widget_example 倉庫到本地：
```
cd aliplayer_widget_example
```
安裝依賴
執行以下命令以安裝專案所需的依賴：
```
flutter pub get
```
編譯工程
編譯Android工程
如果您需要編譯 Android 工程，請按照以下步驟操作：
1. 確保已安裝 Android SDK 和 Gradle。
2. 執行以下命令產生 APK 檔案：
```
flutter build apk
```
3. 編譯完成後，APK 檔案將位於build/app/outputs/flutter-apk/app-release.apk。
編譯iOS工程
如果您需要編譯 iOS 工程，請按照以下步驟操作：
1. 確保已安裝 Xcode 和 CocoaPods。
2. 初始化 CocoaPods 依賴：
```
cd ios && pod install && cd ..
```
3. 執行以下命令產生 iOS 應用程式套件（IPA 檔案）：
```
flutter build ipa
```
4. 編譯完成後，IPA 檔案將位於build/ios/ipa/Runner.ipa。

運行樣本

運行Android樣本
```
flutter run lib/main.dart
```

運行iOS樣本

cd ios && pod install && cd ..//運行前先pod install

flutter run lib/main.dart

IDE 方式運行

使用Android Studio
1. 開啟專案：
  啟動Android Studio。選擇 Open an Existing Project，然後導航到複製的 aliplayer_widget_example 目錄並開啟。
2. 安裝依賴：
  在 Android Studio 中，點擊 pubspec.yaml 檔案，然後點擊右上方的 Pub Get 按鈕以安裝依賴。
3. 配置裝置：
  確保已串連 Android 真機裝置。
4. 運行應用：
  點擊工具列中的綠色運行按鈕（Run），選擇目標裝置後即可啟動應用。
使用 VS Code
1. 開啟專案：
  啟動 VS Code。選擇 File -> Open Folder，然後導航到複製的 aliplayer_widget_example 目錄並開啟。
2. 安裝依賴：
  開啟終端（Ctrl + ~），運行以下命令以安裝依賴：
```
flutter pub get
```
3. 配置裝置：
  確保已串連 Android 或 iOS 真機裝置。使用 VS Code 的裝置選取器（左下角）選擇目標裝置。
4. 運行應用：
  按下 F5 或點擊左側活動欄中的 Run and Debug 表徵圖，選擇 Flutter 配置並啟動偵錯工作階段。
使用 Xcode（僅限 iOS）
1. 開啟專案：
  導航到 ios 目錄，雙擊 Runner.xcworkspace 檔案以在 Xcode 中開啟專案。
2. 安裝 CocoaPods 依賴：
  如果尚未安裝 CocoaPods 依賴，請在終端中運行以下命令：
```
cd ios && pod install && cd ..
```
3. 配置簽名：
  在 Xcode 中，選擇 Runner 專案，進入 Signing & Capabilities 標籤頁，配置有效開發人員帳號和簽署憑證。
4. 運行應用：
  點擊 Xcode 工具列中的運行按鈕（▶️），選擇目標裝置後即可啟動應用。

使用方法

短視頻列表播放頁面（ShortVideoPage）

短視頻播放的核心在於展示如何在列表中嵌入多個 AliPlayerWidget 執行個體，以實現多個視頻的列表播放功能。樣本如下：

@override
void initState() {
  super.initState();
  _pageController = PageController();
  _loadVideoInfoList();
  _pageController.addListener(_onPageChanged);
}

Widget build(BuildContext context) {
  return Scaffold(
    body: PageView.builder(
      controller: _pageController,
      itemCount: videoInfoList.length,
      itemBuilder: (context, index) {
        final videoInfo = videoInfoList[index];
        return ShortVideoItem(videoInfo: videoInfo);
      },
    ),
  );
}

運行效果：當前頁面展示了一個視頻列表，每個清單項目包含一個獨立的播放器執行個體。使用者可以通過滑動操作切換視訊，同時支援手勢滑動進行視頻切換。

說明

更多針對微短劇情境的最佳化方案，請參考aliplayer_widget_example 樣本工程中的具體實現。

核心功能介紹

本組件功能使用阿里雲播放器SDK，通過多個播放器執行個體（AliPlayer）+ 預先載入（MediaLoader）+ 預渲染的方式進行實現，使用了預先載入、預渲染、HTTPDNS、加密播放等核心能力，在播放延遲、播放穩定性及安全性方面大幅提升觀看體驗。

預先載入

通過滑動視窗策略，動態啟停視頻的預先載入任務。SDK底層基於網路狀態智能調節任務優先順序，以確保正播放視頻和即將播放視頻可以獲得更多的網路資源，顯著提升視頻秒開率，減少播放卡頓。即使在快速滑動視頻時，仍然可以獲得流暢的播放體驗。更多資訊，請參見預先載入。

預渲染

使用預渲染的方式，在後台提前渲染後續視頻的首幀，減少黑屏的出現，讓播放更加絲滑。音視頻終端 SDK和播放器SDK從6.16.0版本開始增添了對強制預渲染功能的支援。更多資訊，請參見預渲染。

HTTPDNS

HTTPDNS可以提供更快速和穩定的DNS解析服務，通過替換傳統DNS解析，可以減少DNS解析時間，提高視頻播放的載入速度和穩定性，從而提升使用者的觀看體驗。音視頻終端SDK和播放器SDK從6.12.0版本開始無需手動開啟HTTPDNS。更多資訊，請參見HTTPDNS。

視頻加密

微短劇情境的視頻通常為1~3分鐘的MP4格式視頻，音視頻終端SDK和播放器SDK從6.8.0版本開始支援MP4私人加密播放能力，為微短劇情境的視頻提供安全保障支撐。更多資訊，請參見阿里雲視頻加密（私人加密）。

經私人加密的MP4格式視頻，需滿足以下條件，才可正常播放：

經私人加密的MP4視頻傳給播放器播放時，業務側（App側）需要為視頻URL追加etavirp_nuyila=1，例如：原視頻URL為https://example.aliyundoc.com/test.mp4，則需要傳給播放器播放的視頻URL為https://example.aliyundoc.com/test.mp4?etavirp_nuyila=1。
App的License對應的uid與產生私人加密MP4的uid是一致的。

如何校正私人加密視頻是否正確，以私人加密的視頻URL為例說明如下：

meta資訊裡面應帶有AliyunPrivateKeyUri的tag。
ffplay不能直接播放。

H265自適應播放

當播放H265流硬解失敗且已設定H264備流時，實現自動降級播放H264備流；若未設定H264備流，則自動降級為H265軟解播放。更多資訊，請參見H265自適應播放。

自適應ABR

播放器SDK支援多碼率自適應HLS、DASH視頻流，通過調用播放器的selectTrack方法切換播放的碼流，可以實現網路自適應切換視訊清晰度的功能。更多資訊，詳情請參見網路自適應切換。

常見問題

更多關於使用阿里雲播放器 SDK 的常見問題及修複建議，請參見播放器常見問題匯總。

概述